Form resetting is not working

Question

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?

Answer 1

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

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

Answer 2

The problem is that you set your button's id to "reset". Because of that, your forms reset method got overwritten by the button element. Simply use a different id for your button.

<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="resetBtn" value="Reset" />
</form>

Also, please avoid inline event handlers. Bind events inside your actual script.
See this fiddle.