'Form value to be empty if no change by user

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?

javascripthtmlformsdom-events


Solution 1:[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;}
}

Solution 2:[2]

You are using the wrong technique here. you should be using placeholder which is supported by most major browsers with the regular exception of IE. So if this is not a concern for you, you should definitely be using that. Especially, if you have a label element for that field. Otherwise you'd need to be checking for that input value on submission and see if it equals the string city

Solution 3:[3]

Just Declare a variable hasChanged and set it true when wipe function is called.Then call a function say 'SubmitFunction()'on the onclick function of Submit button.

<input type="text" name="keyword" value="Search" id="Search" onfocus="wipe(this)"/>
<input type="text"  name="city" value="City" id="City" onfocus="wipe(this)"/>
<input type="submit"  name="submit" value="submit"  onclick="SubmitFunction();"/>
var hasChanged=false;
function wipe(obj)
 {
  hasChanged=true;
  obj.value="";
 }
function SubmitFunction()
 {
 if(hasChanged==false)
  {

   $("#City").val('');
  }
 }

Solution 4:[4]

at the time of submit why not check for value='city'

if(obj.value!='city')
{
    //your code here
}

or if you have no problem in using jquery use watermark plugin this will handle browser compatibility problem also

Jquery Watermark

Solution 5:[5]

try this:

if($('input[name="city"]').val() && $('input[name="city"]').val() != 'city') { yourform.submit(); }

Solution 6:[6]

See How to prepopulate input text fields with prompting text which disappears on typing (jQuery) for some solutions to this. If you're okay with using HTML5, the best solution is probably to use "placeholder" instead of "value".

Solution 7:[7]

You should add one more attribute(eg. default <input type="text" name="keyword" default="Search" value="Search" onfocus="wipe(this)"/>) with value same as value attribute.

in on submit compare each form fields 

function onSubmit(){
    for (var fields in form)
      if(form[fields].value== form[fields].getAttribute("default")){
          form[fields].value = "";
      }
   }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Gyan Chandra Srivastava
Solution 2 Hazem Salama
Solution 3 G . R
Solution 4
Solution 5 Khurshid
Solution 6 Community
Solution 7 Anoop

Related Questions