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