Never been to CodeSnippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world (or not, you can keep them private!)

Clear form with Javascript (See related posts)

Purpose: Clear all text fields in a form

Other important features:
- Resulting page must be valid XHTML 1.1
- JS must work in Firefox 1.0 and MS Internet Explorer 6.0
- JS must never generate any errors, even non-fatal ones, in the Firefox Javascript Console
- JS should only clear text input (no hidden fields or visual controls)
- Code must be readable and properly indented

Looking around the web, this was not easy to find. After a few hours of searches, and some back'n'forth at Webmaster World, I got a working version.

In XHTML header:

<script type="text/javascript" src="clear-form-input.js"></script>

In html/form/div

<script type="text/javascript">
  // <![CDATA[
    var el = document.createElement("input");
    el.setAttribute("id", "clearButton");
    el.setAttribute("type", "button");
    el.setAttribute("value", "Clear");
    document.getElementById("deliciousFormDiv").appendChild(el);
    addEvent(el, 'click', function(){ clearForm('delicious');} );
  // ]]>
</script>

In clear-form-input.js:

function clearForm(formIdent) 
{ 
  var form, elements, i, elm; 
  form = document.getElementById 
    ? document.getElementById(formIdent) 
    : document.forms[formIdent]; 

	if (document.getElementsByTagName)
	{
		elements = form.getElementsByTagName('input');
		for( i=0, elm; elm=elements.item(i++); )
		{
			if (elm.getAttribute('type') == "text")
			{
				elm.value = '';
			}
		}
	}

	// Actually looking through more elements here
	// but the result is the same.
	else
	{
		elements = form.elements;
		for( i=0, elm; elm=elements[i++]; )
		{
			if (elm.type == "text")
			{
				elm.value ='';
			}
		}
	}
}
	
function addEvent(elm, strEvent, fnHandler)
{
	return ( elm.addEventListener
	? elm.addEventListener( strEvent, fnHandler, false)
	: elm.attachEvent( 'on'+strEvent, fnHandler)
	);
}
to xhtml html javascript firefox clear form msie valid by engmark on Mon Oct 17 08:20:56 +0000 2005

Comments on this post

shadowspydre posts on May 04, 2006 at 08:37
Do you have to have all 3 pieces of this script?
gammamatrix posts on Feb 13, 2007 at 20:39
This script did not clear select boxes.
I added a section to fix this:
	if (document.getElementsByTagName)
	{
		elements = form.getElementsByTagName('input');
		for( i=0, elm; elm=elements.item(i++); )
		{
			if (elm.getAttribute('type') == "text")
			{
				elm.value = '';
			}
		}
		elements = form.getElementsByTagName('select');
		for( i=0, elm; elm=elements.item(i++); )
		{
			elm.options.selectedIndex=0;
		}
	}


I then call the function with this code:
<input id="clear" class="submit" type="button" value="Clear" onclick="clearForm('my_form_name');"/>


This worked on Firefox, Safari and Camino. I was too lazy to walk over to another computer to test IE.
pmccarthy posts on Jul 30, 2008 at 12:06
Hi All,

I don't know about you lot but I couldn't get either of these options to work on all browser platforms. I am no javascript coder, but after playing around I got this to work. This works on IE6, IE7, Firefox and Opera. Handles Text fields and select boxes:

Here is the hyperlink:
<a href="#" onclick="clearForm('listsearch');">Reset Fields</a>


Here is the function:
function clearForm(formIdent) { 
  var formname = formIdent;
  var inp = document.getElementsByTagName('input');
	for(var i = 0; i < inp.length; i++) {
		if(inp[i].type == 'text') {
			inp[i].value = '';
		}
	}
  var inp = document.getElementsByTagName('select');
	for(var i = 0; i < inp.length; i++) {
		inp[i].selectedIndex=0
	}
  document.listsearch.submit();

}

You need to create an account or log in to post comments to this site.


Related Posts