Clear Textfield Default Value onClick

[Shado]

Good day all

I am currently building a website for a friend in CSS/HTML and need to include a newsletter subscription box that will send the inputted info via email. Unfortunately I have hit a bit of a snag and I was wondering if someone would be able to assist me. I have searched the web and found lots of examples yet I’m still not able to get it to work.

What I seem to be struggling with is getting the value to disappear onclick, obviously the value needs to reappear should no text be added.

<input id="WhereToSend" name="WhereToSend" type="hidden" value="example.com" />
<input id="WhereToReturn" name="WhereToReturn" type="hidden" value="http://www.example.com/thankyoupage.html" />
<input id="Subject" name="Subject" type="hidden" value="Newsletter Subscription Form" />

<script type="text/javascript">
function ValidateForm(frm) {
if (frm.Name.value == "") {alert('Name is required.');frm.Name.focus();return false;}
if (frm.EmailAddress.value == "") {alert('Email address is required.');frm.EmailAddress.focus();return false;}
if (frm.EmailAddress.value.indexOf("@") < 1 || frm.EmailAddress.value.indexOf(".") < 1) {alert('Please enter a valid email address.');frm.EmailAddress.focus();return false;}
function clearText(field){
 if (field.defaultValue == field.value) field.value = '';
 else if (field.value == '') field.value = field.defaultValue;
}

</script>

<table width="400" border="0" cellpadding="5" cellspacing="0" style="width:380px; margin:auto; text-align:left;">
<tr><td width="380">
<input name="Name" type="text" id="Name" onfocus="clearText(this);" onblur="clearText(this);" value="First Name" maxlength="60" style="width:120px; border:1px solid #999999" />
<input name="EmailAddress" type="text" id="EmailAddress" onfocus="clearText(this);" onblur="cclearText(this);" value="Email Address" maxlength="60" style="width:150px; border:1px solid #999999" />
<input id="Submit" name="Submit" type="submit" value="Subscribe" />
</td></tr>
</table>
</form>

I’d appreciate any assistance you could offer and I’m open to suggestions.

[edited by: Fotiman at 2:46 pm (utc) on Mar 12, 2010]
[edit reason] Examplified URLs [/edit]

[Fotiman]

Welcome to WebmasterWorld!
You are missing a } to close the function ValidateForm. This was easy to find by using Firebug, which showed what the error was and where it was. If you aren't using it yet, I highly recommend it. It is an invaluable debugging tool.

[Shado]

Hi Fotiman and thank you for the reply. Regrettably that is not the problem as the } was inserted. My apologies but I think the confusion is a result of my untidy coding style.

<script type="text/javascript">
function ValidateForm(frm) {
if (frm.Name.value == "") {alert('Name is required.');frm.Name.focus();return false;}
if (frm.EmailAddress.value == "") {alert('Email address is required.');frm.EmailAddress.focus();return false;}
if (frm.EmailAddress.value.indexOf("@") < 1 || frm.EmailAddress.value.indexOf(".") < 1) {alert('Please enter a valid email address.');frm.EmailAddress.focus();return false;
[size=3][i][b]}[/b][/i][/size]
function clearText(field){
 if (field.defaultValue == field.value) field.value = '';
 else if (field.value == '') field.value = field.defaultValue;
}
</script>

Thank you for the attempt, I’ll keep looking for a solution. Re: Firebug – I use web dev in FireFox but I have installed the add-on and will give it a go as I’m always looking for new app’s to help me with my web designing.

Once again many thanks! I love your forum - when ever I'm stuck and google the problem 9 out of 10 times I'm directed to WebmasterWorld so I've been lurking around for a while. But now that I have registered I'll make this my first port of call in future.

Have a swell weekend.

[penders]

Your 2nd code snippet is still missing the closing curly brace on the ValidateForm() function (you have just pulled down the curly brace from the line above).

Also...

<input name="EmailAddress" type="text" id="EmailAddress" onfocus="clearText(this);" onblur="cclearText(this);"

[Shado]

Fotiman & penders - you beauties!

That was indeed the problem. Thank you! And pender, thanks for pointing out that typo.