Reset vs clear
If a form field has a default value that was already set in the HTML, calling reset will restore the value to that original value if it has changed since the page was loaded. Obviously if the field was blank, reset will make it blank again. But if it had a value, reset will restore it to that value. Clearing the form will remove all field values no matter what the original value of each field.
Normally it’s simply easier to add a reset button to the form, but there may cases where you want to reset the form using code or from an anchor or button outside the form. This is what I show how to do here.
Here’s an example form. Note that I’ve assigned both name and id attributes and show how to reset the form using either. Your form ideally needs to have one or the other, although you can access the form using e.g. document.forms but it’s not recommended because the number of forms on a page may change.
<form name="myFormName" id="myFormId"> <input type="text" name="test" value="1234546" /> </form>
Using the id attribute:
Using the name attribute:
document.myFormName.reset(); document.forms.myFormName.reset(); document.forms['myFormName'].reset();
Or using jQuery, id then name:
Now wasn’t that easy?