change input from form after submit?

[BradleyD]

Hi all!

I have a simple problem (I hope).
I wanted the text fields full instead of extra text on the page,
so I'm using the "onfocus" and "onblur" events in a form.
ie:
value='Enter Your First Name Here'

onfocus="this.value=''"

onblur="if(this.value=='')this.value=this.defaultValue;"

The problem is, if they don't enter any information,
the script captures the value data instead.

Here's the complete form:
*******************PASTE********************

<form method='POST' action='http://www.MYWEBSITE.com/cgi-bin/arp3/arp3-formcapture.pl'>
<div align='center'><center>
<p>Step 1:<br><input type='text' name='first_name' size='30'value='Enter Your First Name Here' 

onfocus="this.value=''"

onblur="if(this.value=='')this.value=this.defaultValue;"></p>
</center></div>
<input type='hidden' name='capitals' value='1'>
<div align='center'><center>
<p>Step 2:<br><input type='text' name='email' size='30'value='Enter Your Email Here' 

onfocus="this.value=''"

onblur="if(this.value=='')this.value=this.defaultValue;"></p>
</center></div>

<div align='center'><center>
<p>Step 3:<br><input type='text' name='custom_petname' size='30'value='Enter Your Pets Name' 

onfocus="this.value=''"

onblur="if(this.value=='')this.value=this.defaultValue;"></p>
</center></div>

<input type='hidden' name='subscription_type' value=''><div align='center'><center>
<p><input type='image' SRC="images/Green%2001-Get%20It%20Now%20Big.png" style=
"BORDER-BOTTOM: black solid; BORDER-LEFT: black solid; WIDTH: 160px; HEIGHT: 36px; BORDER-TOP: black solid; BORDER-RIGHT: black solid"
                                                                                 border="0"
                                                                                 align="center"></p>
</center></div>
<input type='hidden' name='id' value='2'>
<input type='hidden' name='extra_ar' value=''>
<input type='hidden' name='first_name_man' value='1'>
</form>

*******************END PASTE********************

The form captures "Enter Your Pets Name" as the pet's name.
I wouldn't mind if the captured data was blank, but this is a problem.

I know I can leave the field blank if they click the field, using "onfocus=null",
but if they don't even click the field, the text doesn't clear.

Ultimately, if they don't enter anything,
I would like to send "your pet" to the string.

Any help would be great, this is just a bit beyond me.
And thanks for your time everyone!
You got a great place here :)
Brad.

[JorgeM]

Sounds like you'll need to implement some client-side validation to ensure that the fields are changed with something other than the default text.

[BradleyD]

I wouldn't even know where to begin with something like that.
I've heard of client side actions, but have never used them.
That kind of thing requiers scripting, like cgi or pearl, right?

[LifeSteala]

I believe this will work for you:
http://digitalbush.com/projects/watermark-input-plugin/

Or you can use HTML5:
http://davidwalsh.name/html5-placeholder-css

[BradleyD]

I looked at both of those links.
They led me to try JavaScript.
I found this:
http://buildinternet.com/2009/01/changing-form-input-styles-on-focus-with-jquery/

But in this post, the last thing he has to say on the matter is:
"Keep in mind that if a user submits the form without altering the default values(“Type something here”), those are the items processed by the form. You can correct this by adding a check/action when the submit button is pressed."

So now I just gotta look up the next step, lol.
Just posting my progress for others that might be interested :)

Yup. I'm on the right track anyway.
Thanks for the input!
Brad.