homepage Welcome to WebmasterWorld Guest from 184.72.82.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Clearing form text values in IE and FF
engmark




msg:1493948
 6:40 pm on Sep 12, 2005 (gmt 0)

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




msg:1493949
 8:33 pm on Sep 12, 2005 (gmt 0)

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

engmark




msg:1493950
 6:57 am on Sep 13, 2005 (gmt 0)

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




msg:1493951
 8:01 am on Sep 13, 2005 (gmt 0)

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




msg:1493952
 7:52 pm on Sep 13, 2005 (gmt 0)

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




msg:1493953
 8:18 pm on Sep 13, 2005 (gmt 0)

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




msg:1493954
 12:16 am on Sep 14, 2005 (gmt 0)

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




msg:1493955
 12:20 am on Sep 14, 2005 (gmt 0)

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




msg:1493956
 11:53 am on Sep 17, 2005 (gmt 0)

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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved