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:
In html/form/div
In clear-form-input.js:
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) ); }