How to Clear All Input Fields in Bootstrap Modal When Clicking Data-Dismiss Button

How to clear all input fields in bootstrap modal when clicking data-dismiss button?

http://getbootstrap.com/javascript/#modals shows an event for when a modal is hidden. Just tap into that:

$('#modal1').on('hidden.bs.modal', function (e) {
  $(this)
    .find("input,textarea,select")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end();
})

http://jsfiddle.net/5LCSU/

---

I would suggest the above as it bind the clearing to the modal itself instead of the close button, but I realize this does not address your specific question. You could use the same clearing logic bound to the dismiss buttons:

$('[data-dismiss=modal]').on('click', function (e) {
    var $t = $(this),
        target = $t[0].href || $t.data("target") || $t.parents('.modal') || [];

  $(target)
    .find("input,textarea,select")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end();
})

http://jsfiddle.net/jFyH2/

Clear Bootstrap Modal Form after cancel button is clicked inside Modal

FormGroup has a method called reset():

this.modalForm.reset();

You can read more about reset() and FormGroup itself in Angular 2 official documentation.

Form inside Boostrap Modal does not reset

After changing value of Select2's underlying <select> or <input> you have to trigger change event so this change will be handled by Select2 code and rendered appropriately:

$(".bulkAssignForm").find("select").val("").trigger("change");

Successfully tested on AutoForm Demo test page.

---

Related Topics