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!)

1 total

Clear form with Javascript

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)
	);
}
1 total