Menu
How to clear all input fields in a Bootstrap V3 modal when clicking the data-dismiss button?
707
To close a modal using vue. js you can use the click event i.e. @click to trigger change in modal visibility. So, whenever the close button is pressed the @click method will trigger the function associated with the action ( here, hiding the modal ).
To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.
Data-keyword="false" is to prevent closing modal while clicking Esc button, while data-backdrop="static" , allows you keep modal pop-up opened when clicking on Gray area.
To prevent closing bootstrap modal when click outside of modal window we need add properties data-backdrop="static" and data-keyboard="false" to button which we are using to show modal window like as shown following.
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/
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
