Question

I have the following two html form inputs:

<input type="text" class="faded" name="mobile" value="012-245-6789" onfocus="hideDefault(this)" onblur="showDefault(this)"/>

and

<input class="faded validation_required" type="text" name="dob" value="MM/DD/YYYY" onfocus="hideDefault(this)" onblur="showDefault(this)"/>

and the following javascript:

function hideDefault(input)     
{
if(input.name == "dob")
{
    if (input.value == "MM/DD/YYYY")
    {
        input.value = "";
        input.style.color = "black";
    }
}
else if(input.name == "mobile")
{
    if (input.value == "012-345-6789")
    {
        input.value = "";
        input.style.color = "black";
    }
}
    else
{input.value ="hello";}

}
function showDefault(input)
{
if(input.name = "dob")
{
    if (input.value == "")
    {
        input.value = "MM/DD/YYYY";
        input.style.color = "#A3A3CC";
    }
}
else if(input.name == "mobile")
{
    if (input.value == "")
    {
        input.value = "012-345-6789";
        input.style.color = "#A3A3CC";
    }
}

}

The “dob” input is working fine, when you click on it the default text disappers and when you move off it it comes back. But its not working for the first one, the “mobile” one. Why is this?

Answer 1

You’ve got a value mismatch:

    value="012-245-6789"
...    
    if (input.value == "012-345-6789")
...
    input.value = "012-345-6789";

Note that the 4th digit is 2 in one place and 3 in the others.

And, you’re missing an equals sign here:

if(input.name = "dob")