Question

I have a form with two inputs:

<input type="text" name="keyword" value="Search" onfocus="wipe(this)"/>
<input type="text"  name="city" value="City" onfocus="wipe(this)"/>

and my JavaScript which gets rid of the pre-set value in form field as soon as you click it with your mouse is:

function wipe(obj)
{
obj.value="";
}

My question is, say the user doesn’t type anything in the city field, how do I make it so that when the form is submitted the value for that field is empty and not the word City?

Answer 1

placeholder is a good attribute which can solve your problem its a past time history when we are used to using value for showing for which this textbox we have

 <input type="text" name="keyword" placeholder="Search" />

if you still want to use java script modify your code something like this

<input type="text" name="keyword" value="Search" onfocus="wipe(this,'Search')" onblur="wipe2(this,'Search')"/>
<input type="text"  name="city" value="City" onfocus="wipe(this,'City')" onblur="wipe2(this,'City')"/>

script function for second approch

function wipe(obj, str)
{
if(obj.value!=str){
obj.value="";}
}

function wipe2(obj, str)
{if(obj.value==""){
obj.value=str;}
}