Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

<div id="labels">   <table class="config">     <thead>       <tr>         <th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Control Buttons Configuration</th>       </tr>       <tr>         <th>Index</th>         <th>Switch</th>         <th>Response Number</th>         <th>Description</th>       </tr>     </thead>     <tbody>                   <form id="configform" name= "input" action="#" method="get">         <tr>           <td style="text-align: center">1</td>           <td><img src= "static/switch.png" height="100px" width="108px"></td>           <td id="small"><input style="background: white; color: black;" type="text" value="" id="number_one"></td>           <td><input style="background: white; color: black;" type="text"  id="label_one"></td>         </tr>         <tr>           <td style="text-align: center">2</td>           <td><img src= "static/switch.png" height="100px" width="108px"></td>           <td id="small"><input style="background: white; color: black;" type="text" id = "number_two" value=""></td>           <td><input style="background: white; color: black;" type="text"  id = "label_two"></td>         </tr>         <tr>           <td style="text-align: center">3</td>           <td><img src= "static/switch.png" height="100px" width="108px"></td>           <td id="small"><input style="background: white; color: black;" type="text" id="number_three" value=""></td>           <td><input style="background: white; color: black;" type="text" id="label_three"></td>         </tr>         <tr>           <td style="text-align: center">4</td>           <td><img src= "static/switch.png" height="100px" width="108px"></td>           <td id="small"><input style="background: white; color: black;" type="text" id="number_four" value=""></td>           <td><input style="background: white; color: black;" type="text" id="label_three"></td>         </tr>         <tr>           <td></td>           <td><input type="submit" id="configsubmit" value="Submit"></td>         </tr>         <tr>           <td><input type="reset" id="configreset" value="Reset"></td>         </tr>                          </form>     </tbody>   </table>              </div> 

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:

<script src="static/jquery.min.js"></script> <script src="static/jquery.mobile-1.2.0.min.js"></script> 

and the .reset() method was working.

Currently I'm using

<script src="static/jquery-1.9.1.min.js"></script>       <script src="static/jquery-migrate-1.1.1.min.js"></script> <script src="static/jquery.mobile-1.3.1.min.js"></script> 

Could it possibly be one of the reason?

like image 444
yvonnezoe Avatar asked May 09 '13 01:05

yvonnezoe


People also ask

How do I reset a form?

The HTMLFormElement. reset() method restores a form element's default values. This method does the same thing as clicking the form's <input type="reset"> control. If a form control (such as a reset button) has a name or id of reset it will mask the form's reset method.

What is reset in jQuery?

Definition and Usage. The :reset selector selects button and input elements with type=reset. Tip: Using input:reset as a selector will not select the button element.

How do you reset a form in HTML?

You can easily reset all form values using the HTML button using <input type=”reset”> attribute. Clicking the reset button restores the form to its original state (the default value) before the user started entering values into the fields, selecting radio buttons, checkboxes, etc.

How can I delete form field after submit in jQuery?

ready(function() { submitForm(); }); As you can see from the above function we have resetForm() to call the form and reset the form data.


2 Answers

you may try using trigger() Reference Link

$('#form_id').trigger("reset"); 
like image 160
SagarPPanchal Avatar answered Sep 22 '22 03:09

SagarPPanchal


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 & 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.

like image 27
FullOnFlatWhite Avatar answered Sep 18 '22 03:09

FullOnFlatWhite