373

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 code 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?

Improve this question
5
  • can you give an example of not working? is any of the fields getting reseted? Commented May 9, 2013 at 3:20
  • it's something like this but it is working fine here jsfiddle.net/chJ8B :( probably because of other parts of the script? but i have only 1 form Commented May 9, 2013 at 3:26
  • my question is whether none of the field is resetted / some are working Commented May 9, 2013 at 3:27
  • 13
    Your HTML is invalid. A form can't be a child of a TBODY element, and a TR can't be a child of a FORM element. Put the form tags outside the table (i.e. put the table in the form). Quite possibly the form is being moved outside the table, but the form controls are staying in the cells so they are no longer in the form. Commented May 9, 2013 at 8:33
  • @RobG :O good point! i shall try that. thank you! i could have missed this useful comment if i don't come back here to get my fiddle link :s Commented May 14, 2013 at 8:52

16 Answers 16

Reset to default
644

you may try using trigger() Reference Link

$('#form_id').trigger("reset");
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I am using $('.profile_img_form').trigger('reset'); i have added profile_img_form named class on my form then called it. it does not reset my form and returning error message like Uncaught SyntaxError: Invalid regular expression: /(^|\.)bs\.(?:.*\.|)fileinput(\.|$)/: Kindly suggest what is issue. Thanks.
@Kamlesh it should work, I have created a demo for you, click on jsfiddle.net/Lkt4eq9y/2
Would it reset hidden inputs too? I wouldn't want that
309

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.

Improve this answer

16 Comments

no conflicting ID :( i'm trying to select layer by layer and check if the click works
hmm seems like the click doesnt work! i added $('#ptest').html("clicked reset") in the click(function(){}); where it should show "clicked reset" but it didnt show up
i have a question here. everytime i use console.log, i have no idea where to look out for it. i'm using Python IDLE and a terminal to run the python script. the javascript is in it. anyway, when i use `alert($('#configform')[0]), it gives me [object HTMLFormElement]
Try using alert(JSON.stringify($'#configform')[0])). Alert doesn't care much for pretty printing objects (or telling you what's in it). It just lets you know that it's an object.
@DylanChensky the magic of jQuery is that everything is a set (array). Just as if you were using a regular array in jQuery [0] selects the first element. But in jQuery, it selects the actual html of the element. So, [0] is giving you the html, which allows you to call the html, not jQuery, method called reset. See @kevin 's answer below for more information.
|
115

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()
Improve this answer

3 Comments

It works and I'm in agree, jQuery has no reset() method. You can see how to do it with native JavaScript at w3school doc: w3schools.com/jsref/met_form_reset.asp
I would like to note that this will only reset the form, not clear it. I.e, if the form had values sent with the request, those will be restored.
I would like to add comment regarding placeholder, initial render of form, form elements have values of placeholder, after this reset regardless of placeholder shown again but value become blank, so be care full while form validation. I was adding generic form validation to check placeholder value is default.
55

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

Improve this answer

Comments

37

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
Improve this answer

1 Comment

without using change event it's working fine for me
31

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();
Improve this answer

Comments

29

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.

Improve this answer

9 Comments

u mean simply just that line will do? o.O so is my html above correct?
Define "not working". What error do you get? What isn't working? Reset buttons have been a part of HTML forms forever, they work.
"not working" - it does not reset anything, no change was seen in the form.
Something to note is that "reset" does not mean "my form is cleared". What the semantics of "reset" actually do is return all of the "form" elements back to their original "value" attributes. That confused me for a few minutes at least!
@Lazerbeak12345—unfortunately almost all web pages are now virtually applications that overwrite just about all default functionality of HTML DOMs. Hence even very simple pages are now many megabytes of script and libraries where they were once 20 or 30k of HTML with a little script. Not only is processing power and bandwidth squandered, but accessibility and usability are generally very poor. :-(
|
24

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, 

<td><input type="reset" id="configreset" value="Reset"></td>

works without the need of jquery or anything else. simple click on the button and tadaa~ the whole form is reset ;) brilliant!

Improve this answer

2 Comments

you can usually confirm this is happening by inspecting the source code (not viewing the page source, as that will show what was generated, but rather using something like Developer Tools <kbd>F12</kbd>), which shows you "what the browser sees" -- in which case it would show you (in Chrome, at least) that the form tag had been automatically closed at the beginning of the tbody, excluding the input elements.
check the compatibility: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset
19

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

1 Comment

Same comment as on aldrien's answer
13

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

2 Comments

While this code block may answer the question, you always should provide some explanation for why it does so.
$("#form").find("input[type=text], textarea").val(""); i did this way
7

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

Improve this answer

Comments

4

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>
Improve this answer

1 Comment

Don't forgat to hide it... to make it a more modern form. <input type = 'reset' id = 'resetform' value = 'reset'/ style='display:none;'>
4

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>
Improve this answer

Comments

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

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

Improve this answer

Comments

0

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.

Improve this answer

2 Comments

The only other problem I can think of is that you have another form with the same id (configform). You should do some investigation using the console. First try $. If you're using Chrome, typing $ in the console will activate a context-sensitive list if jQuery is loaded. If you type $ and press return, it will evaluate to a function if jQuery is loaded. Next try $("#configform"). Right-click on the result and select Reveal in Elements panel.
thank you :) but i do not have chrome. is it the same way to do it using firebug? (i have it installed but never use it before)
-1

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(""); }); });
Improve this answer

1 Comment

There seems to be a lot of framework-specific code here. I recommend avoiding such things when answering questions on SO, as the question didn't specify that they were using any framework aside from jQuery

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.