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

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.

Control Buttons Configuration
Index Switch Response Number Description
1
2
3
4

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:

and the .reset() method was working.
Currently I’m using


Could it possibly be one of the reason?

Solutions/Answers:

Solution 1:

you may try using trigger() Reference Link

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

Solution 2:

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…

Related:  chrome undo the action of “prevent this page from creating additional dialogs”

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.

Solution 3:

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

Solution 4:

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

Related:  Django and client-side javascript templates

Solution 5:

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.

Solution 6:

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!