How to use the.reset() method in jQuery to reset a form

Problem

When I clicked on a reset button, I had functional code that would reset my form. However, as my code grows larger, I discover that it is no longer functional.

<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 a source that I need to put in my code for the.reset() method to work? I was previously using:

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

The.reset() method was also functional.

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>

Is it possible that this is one of the reasons?

Asked by yvonnezoe

Solution #1

You could try utilizing the trigger() Reference Link method.

$('#form_id').trigger("reset");

Answered by SagarPPanchal

Solution #2

http://jsfiddle.net/8zLLn/

  $('#configreset').click(function(){
        $('#configform')[0].reset();
  });

Place it in the JS fiddle. It performed as expected.

As a result, none of the aforementioned factors are to blame. Maybe there’s a problem with your IDs conflicting? Is the click genuinely going to work?

Edit: It’s not a problem with your code directly (because I’m a sad sack without good commenting skills). When you pull it out of the context of the page you’re on, it works well, thus it has to be something other than the jQuery/javascript & associated form data. I’d start by bisecting the code in the area and trying to figure out what’s going on. I mean, just to ‘double-check,’ I suppose…

console.log($('#configform')[0]);

Make sure the click function is targeting the correct form…

If it is, it must be something that isn’t on this list.

Part 2 of the edit: If it’s not targeting it right, you may try using “input:reset” instead of what you’re using now… Also, given it’s not the target that’s malfunctioning, I’d recommend determining what the real click is aimed at. Simply open up firebug/developer tools/whatever and paste in the code.

console.log($('#configreset'))

See what comes up. Then we’ll see where we go from there.

Answered by FullOnFlatWhite

Solution #3

jQuery does not have a reset() method, according to this post, although native JavaScript does. So, either use: to convert the jQuery element to a JavaScript object, or use: to convert the jQuery element to a JavaScript object.

$("#formId")[0].reset()
// or
$("#formId").get(0).reset()

Answered by Kevin

Solution #4

This is one of those things where vanilla Javascript is actually easier to work with than jQuery. Because jQuery lacks a reset method, you can use the HTML Form Element to reset all the fields in a form like this:

document.getElementById('configform').reset();

If you use jQuery to accomplish this (as shown in other responses 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).

Answered by Nick F

Solution #5

The first line will clear the form’s inputs.

$('form#myform').trigger("reset"); //Line1
$('form#myform select').trigger("change"); //Line2

Second one will reset select2

Optional: If you have multiple types registered for different events, you can use this.

$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2

Answered by Ali Jamal

Post is based on https://stackoverflow.com/questions/16452699/how-to-reset-a-form-using-jquery-with-reset-method