How to reset a form using jQuery with reset method

Question

I had working code that could reset my form when I click on a reset button  However after my code is getting longer  I realize that it doesn t work anymore   lt div id  quot labels quot  gt     lt table class  quot config quot  gt       lt thead gt         lt tr gt           lt th colspan  quot 4 quot   style   quot padding-bottom  20px  color  6666FF  text-align left  font-size  1 5em quot  gt Control Buttons Configuration lt  th gt         lt  tr gt         lt tr gt           lt th gt Index lt  th gt           lt th gt Switch lt  th gt           lt th gt Response Number lt  th gt           lt th gt Description lt  th gt         lt  tr gt       lt  thead gt       lt tbody gt                     lt form id  quot configform quot  name   quot input quot  action  quot   quot  method  quot get quot  gt           lt tr gt             lt td style  quot text-align  center quot  gt 1 lt  td gt             lt td gt  lt img src   quot static switch png quot  height  quot 100px quot  width  quot 108px quot  gt  lt  td gt             lt td id  quot small quot  gt  lt input style  quot background  white  color  black  quot  type  quot text quot  value  quot  quot  id  quot number one quot  gt  lt  td gt             lt td gt  lt input style  quot background  white  color  black  quot  type  quot text quot   id  quot label one quot  gt  lt  td gt           lt  tr gt           lt tr gt             lt td style  quot text-align  center quot  gt 2 lt  td gt             lt td gt  lt img src   quot static switch png quot  height  quot 100px quot  width  quot 108px quot  gt  lt  td gt             lt td id  quot small quot  gt  lt input style  quot background  white  color  black  quot  type  quot text quot  id    quot number two quot  value  quot  quot  gt  lt  td gt             lt td gt  lt input style  quot background  white  color  black  quot  type  quot text quot   id    quot label two quot  gt  lt  td gt           lt  tr gt           lt tr gt             lt td style  quot text-align  center quot  gt 3 lt  td gt             lt td gt  lt img src   quot static switch png quot  height  quot 100px quot  width  quot 108px quot  gt  lt  td gt             lt td id  quot small quot  gt  lt input style  quot background  white  color  black  quot  type  quot text quot  id  quot number three quot  value  quot  quot  gt  lt  td gt             lt td gt  lt input style  quot background  white  color  black  quot  type  quot text quot  id  quot label three quot  gt  lt  td gt           lt  tr gt           lt tr gt             lt td style  quot text-align  center quot  gt 4 lt  td gt             lt td gt  lt img src   quot static switch png quot  height  quot 100px quot  width  quot 108px quot  gt  lt  td gt             lt td id  quot small quot  gt  lt input style  quot background  white  color  black  quot  type  quot text quot  id  quot number four quot  value  quot  quot  gt  lt  td gt             lt td gt  lt input style  quot background  white  color  black  quot  type  quot text quot  id  quot label three quot  gt  lt  td gt           lt  tr gt           lt tr gt             lt td gt  lt  td gt             lt td gt  lt input type  quot submit quot  id  quot configsubmit quot  value  quot Submit quot  gt  lt  td gt           lt  tr gt           lt tr gt             lt td gt  lt input type  quot reset quot  id  quot configreset quot  value  quot Reset quot  gt  lt  td gt           lt  tr gt                            lt  form gt       lt  tbody gt     lt  table gt                lt  div gt   And my jQuery      configreset   click function            configform   0  reset         Is there some source that I should include in my codes in order for the  reset   method to work  Previously I was using   lt script src  quot static jquery min js quot  gt  lt  script gt   lt script src  quot static jquery mobile-1 2 0 min js quot  gt  lt  script gt   and the  reset   method was working  Currently I m using  lt script src  quot static jquery-1 9 1 min js quot  gt  lt  script gt         lt script src  quot static jquery-migrate-1 1 1 min js quot  gt  lt  script gt   lt script src  quot static jquery mobile-1 3 1 min js quot  gt  lt  script gt   Could it possibly be one of the reason

User · Answer

You can use the following    using  Html BeginForm  MyAction    MyController   new   area    MyArea     FormMethod Post  new    class             lt div class  col-md-6  gt       lt div class  col-lg-3 col-md-3 col-sm-3 col-xs-12  gt           Html LabelFor m   gt  m MyData  new    class    col-form-label          lt  div gt       lt div class  col-lg-9 col-md-9 col-sm-9 col-xs-12  gt           Html TextBoxFor m   gt  m MyData  new    class    form-control          lt  div gt   lt  div gt   lt div class  col-md-6  gt       lt div class    gt           lt button class  btn btn-primary  type  submit  gt Send lt  button gt           lt button class  btn btn-danger  type  reset  gt  Clear lt  button gt       lt  div gt   lt  div gt      Then clear the form           btn reset   click function  ev            ev preventDefault              this  closest  form   find  input   each function i  v                  this  val

User · Answer

http   jsfiddle net 8zLLn         configreset   click function                configform   0  reset            Put it in JS fiddle  Worked as intended    So  none of the aforementioned issues are at fault here  Maybe you re having a conflicting ID issue  Is the click actually executing   Edit   because I m a sad sack without proper commenting ability  It s not an issue directly with your code  It works fine when you take it out of the context of the page that you re currently using  so  instead of it being something with the particular jQuery javascript  amp  attributed form data  it has to be something else  I d start bisecting the code around it out and try to find where it s going on  I mean  just to  make sure   i suppose you could     console log     configform   0      in the click function and make sure it s targeting the right form     and if it is  it has to be something that s not listed here   edit part 2  One thing you could try  if it s not targeting it correctly  is use  input reset  instead of what you are using    also  i d suggest because it s not the target that s incorrectly working to find out what the actual click is targeting  Just open up firebug developer tools  whathave you  toss in   console log     configreset      and see what pops up  and then we can go from there

User · Answer

Your code should work   Make sure static jquery-1 9 1 min js exists   Also  you can try reverting to static jquery min js   If that fixes the problem then you ve pinpointed the problem

User · Answer

A quick reset of the form fields is possible with this jQuery reset function   when you got success response then fire below code     selector  0  reset

User · Answer

You can just add an input type   reset with an id   resetform like this   lt html gt   lt form gt   lt input type    reset  id    resetform  value    reset   gt   lt  --Other items in the form can be placed here-- gt   lt  form gt   lt  html gt    then with jquery you simply use the  click   function on the element with the id   resetform as follows   lt script gt       resetform   click     lt  script gt    and the form resets Note  You can also hide the reset button with id   resetform using your css   lt style gt   resetform   display none     lt  style gt

User · Answer

This is one of those things that s actually easier done in vanilla Javascript than jQuery  jQuery doesn t have a reset method  but the HTML Form Element does  so you can reset all the fields in a form like this   document getElementById  configform   reset      If you do this via jQuery  as seen in other answers here      configform   0  reset     the  0  is fetching the same form DOM element that you would get directly via document getElementById  The latter approach is both more efficient and simpler though  since with the jQuery approach you first get a collection and then have to fetch an element from it  whereas with the vanilla Javascript you just get the element directly

User · Answer

According to this post here  jQuery has no reset   method  but native JavaScript does  So  convert the jQuery element to a JavaScript object by either using         formId   0  reset      or     formId   get 0  reset

User · Answer

First line will reset form inputs    form myform   trigger  quot reset quot      Line1    form myform select   trigger  quot change quot      Line2  Second one will reset select2 Optional  You can use this if you have different types registered with different events    form myform select  form input type checkbox    trigger  quot change quot      Line2

User · Answer

lt button type  reset  gt Reset lt  reset gt    Simplest way I can think off that is robust  Place within the form tag

User · Answer

By using jquery function  closest element  and  find        Getting the parent element and looking for the child   Finally  do the function needed       form   closest  form   find  input type text   textarea   val

User · Answer

I ve finally solve the problem    RobG was right about the form tag and table tag  the form tag should be placed outside the table  with that     lt td gt  lt input type  reset  id  configreset  value  Reset  gt  lt  td gt    works without the need of jquery or anything else  simple click on the button and tadaa  the whole form is reset    brilliant

User · Answer

I use this simple code     reset form      mybutton   click function            myform   find  input text  input password  input file  select  textarea   val              myform   find  input radio  input checkbox   removeAttr  checked   removeAttr  selected

User · Answer

jQuery does not have reset   method  but native JavaScript does  So  convert the jQuery element to a JavaScript object by either using        formId   0  reset         formId   get 0  reset      We may simply use Javascript code  document getElementById  formid   reset

User · Answer

you may try using trigger    Reference Link      form id   trigger  reset

User · Answer

Here is simple solution with Jquery  It works globally  Have a look on the code      document   on  click     clear   function         this  closest  form   trigger  reset         Add a clear class to a button in every form you need to reset it  For example     lt button class  button clear  type  reset  gt Clear lt  button gt

User · Answer

A reset button doesn t need any script at all  or name or id     lt input type  reset  gt    and you re done  But if you really must use script  note that every form control has a form property that references the form it s in  so you could do    lt input type  button  onclick  this form reset     gt    But a reset button is a far better choice

[javascript] How to reset a form using jQuery with .reset() method

Examples related to javascript

Examples related to jquery

Examples related to forms

Examples related to reset