Clear form with JavaScript

JavaScript is the only option, if you want to have the ability to clear all form fields. Yes, HTML form has Reset method, but if the form has initial values, then Reset will return the form to the initial state instead of clear input fields. This example also shows how to create an access loop for each form element. You can uncomment alert before “switch” line and you will see the message before element value is cleared. Drop down select-one will be set to its first option because it can not be treated like input text field or select-multiple.

Text On the left is a simple form to show how this script works. Button Clear will clear form while button Reset will back form to the initial state. You can also change form values before test. Please try!
Textarea
Password
Radio


Checkbox


Select-one
Select-multiple 

And the JavaScript source:

// function will clear input elements on ever form on HTML page
function clearForms() {
	// variable declaration
	var x, y, z, type = null;
	// loop through forms on HTML page
	for (x = 0; x < document.forms.length; x++) {
		// loop through each element on form
		for (y = 0; y < document.forms[x].elements.length; y++) {
			// define element type
			type = document.forms[x].elements[y].type;
			// alert before erasing form element
			//alert('form='+x+' element='+y+' type='+type);
			// switch on element type
			switch (type) {
			case 'text':
			case 'textarea':
			case 'password':
			//case "hidden":
				document.forms[x].elements[y].value = '';
				break;
			case 'radio':
			case 'checkbox':
				document.forms[x].elements[y].checked = '';
				break;
			case 'select-one':
				document.forms[x].elements[y].options[0].selected = true;
				break;
			case 'select-multiple':
				for (z = 0; z < document.forms[x].elements[y].options.length; z++) {
					document.forms[x].elements[y].options[z].selected = false;
				}
				break;
			} // end switch
		} // end for y
	} // end for x
}

As script goes through all form elements on the HTML page, it will not clear only this test form, but Search field and the Message box also. So if you want to leave a comment, do not test the Clear button before you click on submit. On the other hand, if you want to clear only group of input elements closed within DIV or some other HTML tag, you will have to modify clearForms() function and it can look like:

function clearElements(el) {
	// variable declaration
	var x, y, z, type = null, object = [];
	// collect form elements
	object[0] = document.getElementById(el).getElementsByTagName('input');
	object[1] = document.getElementById(el).getElementsByTagName('textarea');
	object[2] = document.getElementById(el).getElementsByTagName('select');
	// loop through found form elements
	for (x = 0; x < object.length; x++) {
		for (y = 0; y < object[x].length; y++) {
			// define element type
			type = object[x][y].type;
			switch (type) {
			case 'text':
			case 'textarea':
			case 'password':
				object[x][y].value = '';
				break;
			case 'radio':
			case 'checkbox':
				object[x][y].checked = '';
				break;
			case 'select-one':
				object[x][y].options[0].selected = true;
				break;
			case 'select-multiple':
				for (z = 0; z < object[x][y].options.length; z++) {
					object[x][y].options[z].selected = false;
				}
				break;
			} // end switch
		} // end for y
	} // end for x
}

You will have to assign ID to the parent element which contains input elements. To clear input elements, function call should look clearElements(‘myForm’).

27 thoughts on “Clear form with JavaScript”

  2. @laxman – Here is simple example how to clear input box. First let’s say that the following text box should have option to be cleared:

    <input type="text" id="myText"/>

    Next to it, you can place “Clear” button to call JavaScript function on click event:

    <input type="button" onclick="clearText()" value="Clear"/>

    And finally, here is JS function:

    function clearText() {
    // set text box reference
    var tb = document.getElementById('myText');
    // clear text box
    tb.value = '';
}

  3. Hello! Awesome script.

    I would like to use it in some antispam.

    The idea is this, I have it quite ready and it works measuring the time frame between the form load and the submit click. If it is too fast, the submit is not accepted.

    Since “too fast” means spam-bot, why not boring it clearing all the fields?

    In the mean time it could (really hard, tough) happen that some human is really fast writing, for that reason my anti spam javascript code pops an alert warning that typewriting has been too fast.

    Well, how to implement this code right after the alert? I ask this because the codes I’ve collected, are working, but I’m not a javascript expert :-)

    Thank you

    Robert

  4. @Robert – Your idea about determining who sits behind the computer (human or bot) could work. So, when you display alert (popup) with “Too fast!” message, you can call “clear form” code right after alert. Something like this:

    ...
// display alert popup
alert('Too fast!');
// after user/bot clicks on "Ok", clear form
clearForms();
...
...

    JavaScript engine will wait until user clicks on alert and the code will continue.

  6. @mpoki jafari – This post explains how to clear HTML input form and you only need to use listed JavaScript function. I also prepared working demo to show how form elements will be cleared and what is difference between type=”reset” and clearing HTML form (just click on “Clear” and “Reset” buttons).

Leave a Comment