Clearing form text values in IE and FF

[engmark]

Sorry for the long explanation, but I've tried literally hundreds of variations without finding one which works. Probably just missed something obvious.

I've got a search form which can be seen e.g.

I would like to be able to set all the text input fields to a blank value, not their URL counterparts.

The current version of the script is copied from a template somewhere, and I've tried countless other variations. Most of them have worked in Firefox, but none in IE 6.0, Windows XP SP 2.

The page is valid XHTML 1.1, and is served as application/xhtml+xml to browsers supporting this, and text/html to all other, such as IE.

The "Clear" button is used to activate the script. JS clearly works in IE, since this button is output using JS.

[edited by: jatar_k at 4:20 pm (utc) on Oct. 5, 2005]
[edit reason] no urls thanks [/edit]

[Bernard Marx]

have you forgotten <input type="reset">
?

[engmark]

No, because that would be the wrong semantics. Reset buttons are supposed to set the values to what was submitted in the URL, and I don't want that.

Another thing I didn't mention: I don't want to use a link with null values for the parameters, because then a new search would be performed, with a very large result.

[Bernard Marx]

OK. Now I get it.

I hear that browsers in full XML mode don't have DOM 0 collections, like 'forms' or 'elements', and have problems with element names. I won't be able to experience this until I have learn configure my server to serve application/xhtml+xml.

I have split the function into a branch for each (old style ¦ XHTML ). The other alternative was more clever than sensible.

The function should (hopefully) even accommodate v4 browsers (avoiding document.all for NN4), but you will have to give the form a name, as well as an id (identical).

function clearForm(formIdent) {
    var form, elements, i;
    
    form = document.getElementById 
        ? document.getElementById('formIdent')
        : document.forms[formIdent];
    if (document.getElementsByTagName)
    {
        elements = document.getElementsByTagName('input');
        for( i=0, elm; elm=elements.item(i++); ) 
            if (elm.getAttribute('type') == "text")
                elm.setAttribute('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 ='';        
    }
}

[engmark]

Your script doesn't work; in IE it gives no error, while FF complains that "elm" is not defined. I added it to the variable declaration, and cleaned up the code a bit. The result is as follows (this forum f's up the indentation):

function clearForm(formIdent) {  
 var form, elements, i, elm; 
 form = document.getElementById? document.getElementById('formIdent') : document.forms[formIdent]; 
 if (document.getElementsByTagName) 
 { 
 elements = document.getElementsByTagName('input'); 
 for( i=0, elm; elm=elements.item(i++); ) 
 { 
 if (elm.getAttribute('type') == "text") 
 { 
 elm.setAttribute('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 =''; 
 } 
 } 
 } 
} 

This works only in FF, and only once. Any ideas?

[engmark]

PS: Shouldn't line 9 read "elements = form.getElementsByTagName('input');" to get the current form's inputs, instead of all of them? I have two forms on the same page.

[Bernard Marx]

PS: Shouldn't line 9 read "elements = form.getElementsByTagName('input');" ...?

Ah yes. Quite so.

Your script doesn't work; in IE it gives no error, while FF complains that "elm" is not defined...

A combination of my silly oversights, and an inbuilt IE problem.
I corrected the errors. Then looked at the HTML page itself. I saw the snippet of script that inserts the 'clear' button.
----------------------------------------

Event handlers cannot be attached, via script, as attributes:

1) Change the event assignment to this:

addEvent(el,"click", function(){ clearForm('delicious');} );

2) Add our custom function, addEvent, to the imported script:

function addEvent(elm, strEvent, fnHandler)
{
  return ( elm.addEventListener
    ? elm.addEventListener( strEvent, fnHandler, false)
    : elm.attachEvent( 'on'+strEvent, fnHandler)
  );
}

----------------------------------------

Here's the rest of it. It works fine in IE.
Problems with Moz using setAttribute. I've put a little note in the code, but I'm currently out of ideas (I only have inklings)

----------------------------------------

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")
      {
        /* With alert:
          Notice that an element can have a visible value,
          but have an empty string for getAttribute.
          Mozilla makes a distinction between attributes
          and Javascript 'expandos' (IE doesn't).
        */
        //alert(elm.getAttribute('value'))
         elm.removeAttribute('value');
        //elm.value = ''; // This works
      }
    }
  }
  // Actually looking through more elements here
  // but the result is the same.
  else
  {
    elms = form.elements;
    for( i=0, elm; elm=elms[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)
  );
}

[Bernard Marx]

PS Code formatting can be preserved (if you're lucky) using <pre></pre> UBB tags
(swap the < ... > for [ ... ] )

[edited by: jatar_k at 3:45 pm (utc) on Oct. 5, 2005]

[engmark]

Brilliant! Thanks!

I just had to uncomment the

elm.value = '';

string to make it work. In other words, using .value works in both IE and FF, with MIME types text/html and application/xhtml+xml.

[edited by: jatar_k at 3:45 pm (utc) on Oct. 5, 2005]
[edit reason] no urls thanks [/edit]