Menu
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?
409
reset() method restores a form element's default values. This method does the same thing as clicking the form's <input type="reset"> control. If a form control (such as a reset button) has a name or id of reset it will mask the form's reset method. It does not reset other attributes in the input, such as disabled .
You can easily reset all form values using the HTML button using <input type=”reset”> attribute. Clicking the reset button restores the form to its original state (the default value) before the user started entering values into the fields, selecting radio buttons, checkboxes, etc.
To clear all form fields after submitting:Add a submit event listener on the form element. When the form is submitted, call the reset() method on the form. The reset method restores the values of the input fields to their default state.
Well, you could just do foreach (Control c in this. Controls) { if (c is TextBox) { c. ResetText(); } } - or something like that. No need to use a for-loop.
If your objective is only to reset the form, you could try this:
<input type="reset" id="reset" value="Reset" onclick="this.form.reset();"/>
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.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
