works in IE6 but not in NN7/Opera7

javascript and form submit

[janehuangtw]

<FORM name="RegEmail" method="POST" action="EmailReg.asp">
<INPUT type="text" name="txtCustEmail" size="15" value="Enter E-mail Here" onClick="document.all.txtCustEmail.value = '';">
<img border="0" src="images/goBtn.jpg" onMouseOver="this.style.cursor = 'hand';" onClick="if (document.all.txtCustEmail.value == '') {alert('Please enter your E-mail address');}else{submit();}">
</FORM>

Above code works fine in IE. But in NN/Opera, when press the GO button, it doesn't do anything or go anywhere. Any suggestion would be greatly appreciated.

[RonPK]

Hello janehuangtw, welcome to WebmasterWorld!

Try this:

<FORM name="RegEmail" method="POST" action="EmailReg.asp"> 
<INPUT type="text" name="txtCustEmail" size="15" value="Enter E-mail Here" onClick="this.value = '';"> 
<img border="0" src="images/goBtn.jpg" onMouseOver="this.style.cursor = 'hand';" onClick="if (document.RegEmail.txtCustEmail.value == '') {alert('Please enter your E-mail address');}else{submit();}"> 
</FORM> 

Works in IE6, Moz1.3 and Opera7, all on Windows ME.

[tedster]

If I read correctly, the only issue here is document.all - and that is legacy syntax that only ever worked in older versions of Explorer, not other browsers.

document.all was part of Explorer's proprietary Document Object Model, so Explorer offers legacy support in version 6. However, the new standard DOM does not support it.

[felix]

To support the legacy browsers, you still have to use document.all.txtCustEmail.value or something along those lines. In new browsers supporting the DOM use document.getElementById('txtCustEmail').value. That would mean you would have to define an id attribyte for your input. You will also need to implement a way to determine which kind of client you are using so that the appropriate script will get used.

[RonPK]

That's all very true, but in this case one can easily replace the references to document.all by references to the form object or by using the this-thingy. That means it is not necessary to first detect DOM-support.

janehuangtw, I noticed an error in my code. The else-statement in the image tag should read

document.RegEmail.submit();

and not just submit();. That way non-IE browsers will also submit the form.

[felix]

Ron,
He is changing the value attribute of the input tag when an onclick event occurs on the img tag. In that case this.value refers to the img tag, so he needs to use employ some kind of browser detection to execute the right code for different browsers.

[RonPK]

Hi Felix,
What I meant to say is that form elements can be referred to without using document.all[] or document.getElementById(). All modern browsers can handle references like document.formName.inputFieldName

NN4 may give some problems with this, IIRC, or otherwise I think it doesn't support the onClick-event for images. Fortunately janehuangtw didn't mention NN4.

[janehuangtw]

Thanks, RonPK.