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

Question

How to clear all input fields in a Bootstrap V3 modal when clicking the data-dismiss button

User · Answer

In addition to  Malk  I wanted to clear all fields in the popup  except the hidden fields  To do that just use this       modal   on  hidden bs modal   function            this           find  input not  type hidden   textarea select            val              end            find  input type checkbox   input type radio             prop  checked                end          This will clear all fields  except the hidden ones

User · Answer

If you are using a form in the modal then you can use      form id   trigger  reset

User · Answer

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

User · Answer

There is a more easy and beautiful way       MyModal   on  hidden bs modal   function            this  find  form   trigger  reset         reset is dom build-in funtion  you can also use   this  find  form   0  reset     And Bootstrap s modal class exposes a few events for hooking into modal functionality  detail at here      hide bs modal   This event is fired immediately when the hide instance   method has been called       hidden bs modal This event is fired when the modal has finished being   hidden from the user  will wait for CSS transitions to complete

User · Answer

enclose your modal body inside a form with an id  myform   and then       activatesimModal   on  hidden bs modal  function            myform reset          should do the trick

User · Answer

Put the contents in your modal inside a form and give it an ID which is equal to  myForm    When the close button is clicked  give an onclick to the function  myFunction       lt button class  btn btn-default  data-dismiss  modal  onclick  myFunction    gt Cancel lt  button gt   function myFunction                 document getElementById  myForm   reset

User · Answer

I did it in the following way    Give your form element  which is placed inside the modal  anID  Assign your data-dimiss an ID  Call the onclick method when data-dimiss is being clicked  Use the trigger   function on the form element  I am adding the code example with it       document  ready function                  mod cls   on  click   function            Q A   trigger  reset        console log     Q A                         lt div class  modal fade   id  myModal2  role  dialog   gt       lt div class  modal-dialog  gt       lt  -- Modal content-- gt       lt div class  modal-content  gt       lt div class  modal-header  gt         lt button type  button  class  close  ID  mod cls  data-dismiss  modal  gt  amp times  lt  button gt         lt h4 class  modal-title   gt Ask a Question lt  h4 gt       lt  div gt       lt div class  modal-body  gt         lt form role  form  action    id  Q A  method  POST  gt           lt div class  form-group  gt             lt label for  Question  gt  lt  label gt             lt input type  text  class  form-control  id  question  name  question  gt           lt  div gt          lt div class  form-group  gt             lt label for  sub name  gt Subject  lt  label gt             lt input type  text  class  form-control  id  sub name  NAME  sub name  gt           lt  div gt           lt div class  form-group  gt             lt label for  chapter name  gt Chapter  lt  label gt             lt input type  text  class  form-control  id  chapter name  NAME  chapter name  gt           lt  div gt           lt button type  submit  class  btn btn-default btn-success btn-block  gt  Post lt  button gt                                  lt  form gt       lt  div gt       lt div class  modal-footer  gt         lt button type  button  class  btn btn-default  data-dismiss  modal  gt Cancel lt  button gt  lt  --initially the visibility of  upload another note  is hidden  but it becomes visible as soon as one note is uploaded-- gt         lt  div gt         lt  div gt         lt  div gt         lt  div gt      Hope this will help others as I was struggling with it since a long time

User · Answer

The following worked for me       input   val        However  it is submitting the form  so it might not be what you are looking for

User · Answer

data-dismiss modal    on  click   function  e       var  t     this            target    t 0  href     t data  target       t parents   myModal                target        find  input           val             end        find  input type checkbox            prop  checked                end          span inerror   html           span inerror   removeClass  inerror     document getElementById  errorDiv1   innerHTML                  This code can be used on close data-dismiss of modal  to clear all fields    Here I have cleared my input fields and my div as id  errorDiv1  which holds all validation errors  With this code I can also clear other validation errors having class as inerror which is specified in span tag with class inerror and which was not possible using document getElementsByClassName

User · Answer

This is helpfull  its work for me        bd-example-modal-sm   on  hidden bs modal   function               this  find  select   val     end       Clear dropdown content          ul   empty         Clear li content

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

Examples related to javascript

Examples related to html

Examples related to twitter-bootstrap