How to reset form body in bootstrap modal box

Question

I am looking for a way to clear all elements found within an HTML form contained inside a Bootstrap modal without refreshing the page   Currently   The user enters data and closes the modal   When the user re-opens the modal  the previously entered data still remains   How can I completely clear all elements within the form during the close event of the modal dialog so that when the user re-opens it  they always get fresh clean inputs  amp  etc

User · Answer

I went with a slightly modified version of @shibbir's answer:

// Clear form fields in a designated area of a page
$.clearFormFields = function(area) {
  $(area).find('input[type="text"],input[type="email"],textarea,select').val('');
};

Called this way:

$('#my-modal').on('hidden', function(){
  $.clearFormFields(this)
});

User · Answer

Mark Berry s answer worked fine here  I just add to split the previous code     clearFormFields   function area        area  find  input type  text   input type  email   textarea select   val           to     clearFormFields   function area                      area  find  input name   val                        area  find  input phone   val                        area  find  input email   val                        area  find  select topic   val                        area  find  textarea description   val

User · Answer

The below solution solved my problem and also kept the default values     body   on  hidden bs modal     modal   function           this  find  input type  text   input type  email   textarea select   each function          if  this defaultValue          this value    this defaultValue             this value   this defaultValue         else   this value

User · Answer

This is a variance of need to reset body to original content  It doesn t deal with a form but I feel it might be of some use  If the original content was a ton of html  it is very difficult to string out the html and store it to a variable  Javascript does not take kindly to the line breaks that VS 2015 whatever allows   So I store original ton of html in default modal like this on page load   var stylesString       DefaultModal  modal-body   html      Which allows me to to reuse this content when original default button for modal is pressed  there are other buttons that show other content in same modal        btnStyles   click function            pass the data in the modal body adding html elements         DefaultModal  modal-body   html stylesString        DefaultModal   modal  show         If I put an alert for the styleString variable it would have an endless string of all the html with no breaks but does it for me and keeps it out of VS editor   Here is how it looks in Visual Studio inside default modal  Saved in the string variable whether automatic   html  or by hand in VS  it would be one big line    lt div class  modal-body  id  modalbody  gt         lt div class  whatdays  gt  lt span style  background-color black color white padding 4px 4px 4px 4px border 2px solid yellow   gt All Styles lt  span gt  lt  div gt       lt div class  whatdays  style  background-image  url        Responsive ballroom jpg   background-size  100  100    gt  lt span style  background-color black color white padding 4px 4px 4px 4px border 2px solid yellow   gt Ballroom lt  span gt  lt  div gt       lt div class  whatdays  style  background-image  url        Responsive blues jpg   background-size  100  100    gt  lt span style  background-color black color white padding 4px 4px 4px 4px border 2px solid yellow   gt Blues lt  span gt  lt  div gt       lt div class  whatdays  style  background-image  url        Responsive contra jpg   background-size  100  100    gt  lt span style  background-color black color white padding 4px 4px 4px 4px border 2px solid yellow   gt Contra lt  span gt  lt  div gt       lt div class  whatdays  style  background-image  url        Responsive countrywestern jpg   background-size  100  100    gt  lt span style  background-color black color white padding 4px 4px 4px 4px border 2px solid yellow   gt Country lt  span gt  lt  div gt       lt div class  whatdays  style  background-image  url        Responsive english-country jpg   background-size  100  100    gt  lt span style  background-color black color white padding 4px 4px 4px 4px border 2px solid yellow   gt English Country lt  span gt  lt  div gt       lt div class  whatdays  style  background-image  url        Responsive israeli jpg   background-size  100  100    gt  lt span style  background-color black color white padding 4px 4px 4px 4px border 2px solid yellow   gt Israeli lt  span gt  lt  div gt       lt div class  whatdays  style  background-image  url        Responsive lindyhop jpg   background-size  100  100    gt  lt span style  background-color black color white padding 4px 4px 4px 4px border 2px solid yellow   gt Lindy Hop Swing lt  span gt  lt  div gt       lt div class  whatdays  style  background-image  url        Responsive miscvariety jpg   background-size  100  100    gt  lt span style  background-color black color white padding 4px 4px 4px 4px border 2px solid yellow   gt Misch Variety lt  span gt  lt  div gt       lt div class  whatdays  style  background-image  url        Responsive neo-square jpg   background-size  100  100    gt  lt span style  background-color black color white padding 4px 4px 4px 4px border 2px solid yellow   gt Neo-Square lt  span gt  lt  div gt       lt div class  whatdays  style  background-image  url        Responsive polka jpg   background-size  100  100    gt  lt span style  background-color black color white padding 4px 4px 4px 4px border 2px solid yellow   gt Polka lt  span gt  lt  div gt       lt div class  whatdays  style  background-image  url        Responsive salsa jpg   background-size  100  100    gt  lt span style  background-color black color white padding 4px 4px 4px 4px border 2px solid yellow   gt Salsa lt  span gt  lt  div gt       lt div class  whatdays  style  background-image  url        Responsive scottish jpg   background-size  100  100    gt  lt span style  background-color black color white padding 4px 4px 4px 4px border 2px solid yellow   gt Scottish lt  span gt  lt  div gt       lt div class  whatdays  style  background-image  url        Responsive square jpg   background-size  100  100    gt  lt span style  background-color black color white padding 4px 4px 4px 4px border 2px solid yellow   gt Square lt  span gt  lt  div gt       lt div class  whatdays  style  background-image  url        Responsive tango jpg   background-size  100  100    gt  lt span style  background-color black color white padding 4px 4px 4px 4px border 2px solid yellow   gt Tango lt  span gt  lt  div gt       lt div class  whatdays  style  background-image  url        Responsive waltz jpg   background-size  100  100    gt  lt span style  background-color black color white padding 4px 4px 4px 4px border 2px solid yellow   gt Waltz lt  span gt  lt  div gt       lt div class  whatdays  style  background-image  url        Responsive wcswing jpg   background-size  100  100    gt  lt span style  background-color black color white padding 4px 4px 4px 4px border 2px solid yellow   gt WCS lt  span gt  lt  div gt       lt div class  whatdays  style  background-image  url        Responsive zyedeco-gator jpg   background-size  100  100    gt  lt span style  background-color black color white padding 4px 4px 4px 4px border 2px solid yellow   gt Zydeco Cajun lt  span gt  lt  div gt

User · Answer

Just find your form and clear before it opens        modal       modal         modal find  form   0  reset

User · Answer

Just set the empty values to the input fields when modal is hiding       Modal Id   on  hidden   function             Form Id   find  input type  text     val

User · Answer

You can make a JavaScript function to do that      clearInput   function                 form   find  input type text   input type password   input type number   input type email   textarea   val           and then you can call that function each time your modal is hidden       Your Modal   on  hidden   function                clearInput

User · Answer

In Bootstrap 3 you can reset your form after your modal window has been closed as follows       modal   on  hidden bs modal   function          this  find  form   0  reset

User · Answer

If you using ajax to load modal s body such way and want to be able to reload it s content   lt a data-toggle  modal  data-target   myModal  href    add  gt Add lt  a gt   lt a data-toggle  modal  data-target   myModal  href    edit id  gt Modify lt  a gt    lt div id  myModal  class  modal fade  gt       lt div class  modal-dialog  gt           lt div class  modal-content  gt               lt  -- Content will be loaded here -- gt           lt  div gt       lt  div gt   lt  div gt    use    lt script gt        function                 modal   on  hidden bs modal   function                  this  removeData  bs modal                         lt  script gt

[forms] How to reset form body in bootstrap modal box?

Examples related to forms

Examples related to twitter-bootstrap

Examples related to refresh