CODEWITHSUNDEEP
javascriptjqueryhtmlformsreset
Linga
Linga

Reputation: 10573

Form resetting is not working

I'm using the following code to reset the form fields.

document.getElementById("form1").reset();//form1 is the form id.

It is not working. I also tried with JQuery. Even JQuery also not working.

$("#reset").click(function(){
$('form1')[0].reset();
});

My html code is

<form name="form1" id="form1" method="post">
<h3>Personal Information</h3>
<h4>Name</h4>
<input type="text" id="fname" name="fname" maxlength=50 size=11/>
<input type="text" id="mname" name="mname" maxlength=15 size=8/>
<input type="text" id="lname" name="lname" maxlength=50 size=11/>
<input type="button" id="reset" value="Reset" onclick="Reset()"/>
</form>

I'm following W3Schools. Here is my Fiddle. Can you please explain the mistake?

Upvotes: 12

Views: 65691

Answers (8)

sudee
sudee

Reputation: 783

The problem here is that you've set the id of your button to "reset". This automatically overwrites the built-in reset method of the form element.

The solution is to use a different id attribute for your button.

So instead of:

<input type="button" id="reset" value="Reset" />

Use something like:

<input type="button" id="reset-button" value="Reset" />

See this fiddle.

Upvotes: 21

stilliard
stilliard

Reputation: 772

Ok, see my new jsfiddle: http://jsfiddle.net/ty9rU/17/ So i renamed the button to reset_btn

Basicly you had an element called reset inside the form, and that caused the issue.

Upvotes: 0

Anon3836363733
Anon3836363733

Reputation: 31

I've updated your fiddle.

Why vanilla js isn't working:

You don't have...

document.getElementById("form1").reset();//form1 is the form id.

...within a reset function. You could do this:

function Reset() {
    document.getElementById("form1").reset();//form1 is the form id.
}

Why jQuery isn't working:

You don't need to do all that you're doing. It's much more simple than that. Also, look at your 'form1' selector. You should likely add '#form1' instead. jQuery selects are different than the getElementByID function. As you can probably assume by the name, the getElementByID function is already getting the element by the ID; however with jQuery you have to specify those things. Also, don't really need the onClick attribute with jquery.

Upvotes: 1

Elorfin
Elorfin

Reputation: 2497

With jQuery, the correct selector is :

$('#form1') // Select with ID

OR

$('form[name=form1]') // Select with name

Upvotes: 1

Linga
Linga

Reputation: 10573

I finally solved my issue. the problem is "id=reset". Because it overrides the reset method . I changed it to id="reset1". Now it is working

Upvotes: 5

silverbeak
silverbeak

Reputation: 312

If your objective is only to reset the form, you could try this:

<input type="reset" id="reset" value="Reset" onclick="this.form.reset();"/>

Upvotes: 3

stilliard
stilliard

Reputation: 772

Looks like your seleting $('form1') as in an element with a tag name of form1, while i think you actually want to select it by the id:

$('#form1')[0].reset();

Upvotes: 2

Ankit Tyagi
Ankit Tyagi

Reputation: 2375

Have you simply try this : Reset

<input type="reset" value="Reset"/>

Upvotes: 4

Related Questions