jquery – modal javascript reset close content-ThrowExceptions

Exception or error:

When saving the change, the modal form should close automatically and when requested again, the selected content and text should be reset.
any suggestion what I’m doing wrong with the jquery script?

$('#MyModal').on('hidden.modal', function () {
    $(this).find('form').trigger('reset');
    $('#myModal').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<button type="button" class="btn-primary" data-toggle="modal" data-target="#myModal" ">Modal Window</button>

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myModalLabel">Modal title</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
	  <div class="modal-body"> 
	     <div class="form-group col-md-12">
		<select id="role" name="role" class="form-control">
		<option value="" disabled selected>Select your option</option>
	<option value='Maybe'>Maybe</option>
		<option value='Yes'>Yes</option>
 		<option value='No'>No</option>
		</select>
	     </div>
             <div class="form-group col-md-12">
        <textarea id="thetext" name="thetext" class="form-control" rows="4" cols="20" maxlength="200"></textarea>
        <input type="hidden" name="selectedCase" id="selectedCase" value=""/>
           </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
How to solve:

So I have noticed a few things to start off.

Firstly, you don’t actually have a form, so you are unable to call reset in order to clear it.

Secondly,The code $('#MyModal').on('hidden.modal' is looking for an event called hidden.modal which doesn’t actually get called because the modal is never hidden.

What needs to happen is for a form to be added or for alternative methods of clearing to be used along with an actual method of closing the modal to be implemented. What I suggest is to listen for the button press before manually closing the modal and retrieving the values you want, followed by clearing the form.

After fixing these issues you should be good to go as shown below:

$('#closeButton').on('click', function () {
    //Close Modal
    $(".modal").modal("hide");
    //Get Values
    var val1 = $("#role").val();
    var val2 = $("#thetext").val();
    //Reset Values
    document.getElementById("form").reset();

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<button type="button" class="btn-primary" data-toggle="modal" data-target="#myModal" ">Modal Window</button>

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myModalLabel">Modal title</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
	  <div class="modal-body"> 
    <form id ="form">
	     <div class="form-group col-md-12">
		<select id="role" name="role" class="form-control">
		<option value="" disabled selected>Select your option</option>
	<option value='Maybe'>Maybe</option>
		<option value='Yes'>Yes</option>
 		<option value='No'>No</option>
		</select>
	     </div>
             <div class="form-group col-md-12">
        <textarea id="thetext" name="thetext" class="form-control" rows="4" cols="20" maxlength="200"></textarea>
        <input type="hidden" name="selectedCase" id="selectedCase" value=""/>
           </div>
      </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="closeButton">Save changes</button>
      </div>
    </div>
  </div>
</div>

Hope this is what you wanted!

Felix.

Leave a Reply

Your email address will not be published. Required fields are marked *