[javascript] 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?

This question is related to javascript jquery forms reset

The answer is


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


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');
});

First line will reset form inputs

$('form#myform').trigger("reset"); //Line1
$('form#myform select').trigger("change"); //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("change"); //Line2

you may try using trigger() Reference Link

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

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.


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();

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("");

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.


A reset button doesn't need any script at all (or name or id):

<input type="reset">

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:

<input type="button" onclick="this.form.reset();">

But a reset button is a far better choice.


You can use the following.

@using (Html.BeginForm("MyAction", "MyController", new { area = "MyArea" }, FormMethod.Post, new { @class = "" }))
{
<div class="col-md-6">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
        @Html.LabelFor(m => m.MyData, new { @class = "col-form-label" })
    </div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
        @Html.TextBoxFor(m => m.MyData, new { @class = "form-control" })
    </div>
</div>
<div class="col-md-6">
    <div class="">
        <button class="btn btn-primary" type="submit">Send</button>
        <button class="btn btn-danger" type="reset"> Clear</button>
    </div>
</div>
}

Then clear the form:

    $('.btn:reset').click(function (ev) {
        ev.preventDefault();
        $(this).closest('form').find("input").each(function(i, v) {
            $(this).val("");
        });
    });

You can just add an input type = reset with an id = resetform like this

<html>
<form>
<input type = 'reset' id = 'resetform' value = 'reset'/>
<!--Other items in the form can be placed here-->
</form>
</html>

then with jquery you simply use the .click() function on the element with the id = resetform as follows

<script> 
$('#resetform').click();
</script>

and the form resets Note: You can also hide the reset button with id = resetform using your css

<style>
#resetform
{
display:none;
}
</style>

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:

<button class="button clear" type="reset">Clear</button>

<button type="reset">Reset</reset>

Simplest way I can think off that is robust. Place within the form tag.


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()

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();


Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to forms

How do I hide the PHP explode delimiter from submitted form results? React - clearing an input value after form submit How to prevent page from reloading after form submit - JQuery Input type number "only numeric value" validation Redirecting to a page after submitting form in HTML Clearing input in vuejs form Cleanest way to reset forms Reactjs - Form input validation No value accessor for form control TypeScript-'s Angular Framework Error - "There is no directive with exportAs set to ngForm"

Examples related to reset

How to reset a form using jQuery with .reset() method Reset all the items in a form How to reset db in Django? I get a command 'reset' not found error How to git reset --hard a subdirectory? How do I revert back to an OpenWrt router configuration? Wipe data/Factory reset through ADB Fastest way to reset every value of std::vector<int> to 0 How do I reset the setInterval timer? How to reset par(mfrow) in R Reset auto increment counter in postgres