I have this modal

<form id="contactModal">
<div id="mymodal2" class="" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
     <div class="modal-dialog">
           <div class="modal-content">
              <div class="modal-header">                  
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <span class="modal-title th2" id="lblModalLabel" name="lblModalLabel">Contact</span>
            </div>
            <div class="modal-body">

What I want is to clear modal every time its closed so I wrote a script like this:

function clear() {
    $("#txtNombreCompleto").val("");
    $("#txtNombreEmpresa").val("");
    $("#exampleInputEmail2").val("");
    $("#dropOficina").val("");
    $("#txtTelefono").val("");
    $("#txtMensaje").val("");
}
$('#mymodal').on('hidden', function(){
    $.clear(this)
});

So my inputs inside the modal are something like this:

 <input type="text" class="form-control" id="txtNombreCompleto" name="txtNombreCompleto" placeholder="Nombre pleto">

But when I close the modal, it doesn´t run the function, how can I run the function when the modal closes? Regards

I have this modal

<form id="contactModal">
<div id="mymodal2" class="" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
     <div class="modal-dialog">
           <div class="modal-content">
              <div class="modal-header">                  
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <span class="modal-title th2" id="lblModalLabel" name="lblModalLabel">Contact</span>
            </div>
            <div class="modal-body">

What I want is to clear modal every time its closed so I wrote a script like this:

function clear() {
    $("#txtNombreCompleto").val("");
    $("#txtNombreEmpresa").val("");
    $("#exampleInputEmail2").val("");
    $("#dropOficina").val("");
    $("#txtTelefono").val("");
    $("#txtMensaje").val("");
}
$('#mymodal').on('hidden', function(){
    $.clear(this)
});

So my inputs inside the modal are something like this:

 <input type="text" class="form-control" id="txtNombreCompleto" name="txtNombreCompleto" placeholder="Nombre pleto">

But when I close the modal, it doesn´t run the function, how can I run the function when the modal closes? Regards

• javascript
• c#
• twitter-bootstrap

• Try this $('#myModal').on('hidden.bs.modal', function () { // do something… }) – Sami Commented Jun 20, 2016 at 3:59
• I do it, but don´t run, also I put script on console and it works @Sami – Gerry Commented Jun 20, 2016 at 4:07
• Check your page for JavaScript errors. – Sami Commented Jun 20, 2016 at 4:08
• @Sami : put your code inside $(document).ready(function() { /*... here ....*/ }); – Pranav C Balan Commented Jun 20, 2016 at 4:12

3 Answers 3

Simply call clear(); inside bootstrap modal hide.bs.modal event(or hidden.bs.modal) handler or set the function as callback. Also put your code inside document ready handler for attaching event handler after loading the page.

$(document).ready(function() {
  $('#mymodal').on('hidden', function() {
    clear()
  });
});

or get all form all elements inside modal and set value

$(document).ready(function() {
  $('#mymodal').on('hidden', function() {
    $(':input', this).val('');
  });
});    

I tried this code in my project but it didn't work. So I tried this new code

$(document).ready(function() {
    $('.modal').on('hidden.bs.modal', function(){
        $(this).find('form')[0].reset();
     });
});

 $('.btnLogMesaj').click(function () { // your button is clicked
      $('div#demo').empty();  // clear the "div" of the id "demo" 
     *
     * 
     *
  });

     <div class="modal-body">
                <div id="demo">
                    <h4>... Merve's contents </h4>
                </div>
      </div>