Question

So long story short, aside from being a noob, im not sure why this is not working.
overall i have different functions to check different things.

for the sake of this example, i have a form (one field to test) with a default value of say.. “enter name here”. so the html below

<input type="text" value="enter name here" id="fieldOne"/>

js below.

// sample vars

var fieldOne = $('#fieldOne');

//this function below will fire on blur.

function checkVal(){
    if($(this).val()== $(this).attr('defaultValue')){
        $(this).css("background-color","red");
        $(this).css("color","white");   
    } else if($(this).val()==""){
        $(this).css("background-color","red");
        $(this).css("color","white");   
        $(this).val("oopsiiee, you forgot this one");

    } else {
        $(this).css("background-color","green");
        $(this).css("color","white");   
    }

}

then on the form field, on blur i do this

fieldOne.blur(checkVal); etc…

this above works,

Now since it has a default value, so i want it so that when user clicks on said field, that that def value disappears.

so i do something like this:

function clearField(){
  $(this).val("");
}

this works

fieldOne.click(clearField); etc…

problem now is that with this, even when the data has been changed from def to whatever, the mssg that was entered disppears again SOOooo, i want to edit this simple function so that, if the mssg is default, clear it. If the mssg is not default then that means its been changed so leave it.
so to this i write this which breaks the whole thing.

function clearField(){
    if($(this).val() == $(this).attr('defaultValue')){
        $(this).val() == "";
    }
}

Not sure whats going on.

ive also tried

function clearField(){
    if($(this).val() == $(this).attr('defaultValue')){
        $(this).attr('defaultValue') == "";
    }
}

Any tips, ideas, corrections etc i humbly accept/appreciate

Thanks in advanced.

Answer 1

Is something like this what you’re looking to accomplish?

$inputs = $('input[type=text], input[type=password]');

$inputs.focus(function() {
    if(this.value==this.defaultValue)
    {
        this.value='';
    }
}).blur(function() {
    if($.trim(this.value)=='')
    {
        this.value=this.defaultValue;
    }    
});

Fiddle of this example: http://jsfiddle.net/yajxr/2/