Never been to TextSnippets 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)
        );
}

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.

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


Related Posts