• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / Reset an HTML form with Javascript

Reset an HTML form with Javascript

After receiving a number of "creative" ways to reset forms with Javascript on my "clear a form with jQuery" post, I’ve decided to post the correct way to reset a form with Javascript.

Reset vs clear

Interestingly, all the commenters on that post who posted how to reset a form with Javascript failed to understand the purpose of that post. The purpose of the post was to show how to clear the values from all the fields to an empty state, which is not the same as resetting the form to its default state.

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.

Reset the form with Javascript

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[0] 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>

And here are a variety of ways to reset the form using Javascript.

Using the id attribute:

document.getElementById('myFormId').reset();

Using the name attribute:

document.myFormName.reset();
document.forms.myFormName.reset();
document.forms['myFormName'].reset();

Or using jQuery, id then name:

$('#myform').get(0).reset();
$('form[name=myform]').get(0).reset();

Now wasn’t that easy?

Check Out These Related posts:

  1. Clear a form with jQuery
  2. Clear a form with Javascript
  3. jQuery: show plain text in a password field and then make it a regular password field on focus
  4. Resetting an HTML form with a reset input button

Filed Under: Javascript

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap