Question

I want to implement jquery/js in my forms and I want to make input values dynamic.
Basically the idea is that once clicked the value of the field disappears/blurs and
jquery expects the user to insert a value, if a value is set and it is not the same
as the default value then it’s okay. But if the value written by the user is the same
then don’t accept and throw an error, else if the value “entered” by the user is empty
display the default value again. Im sure it makes sense as I think i’ve seen this functionality implementet in a lot of sites. But I’m now a jquery guy so I dont know
how to do it. I can do the same in php but page refreshing is something I want to avoid.
So assuming we have:

<input type="text" value="City" />

Thank you alot,
Borni.

Answer 1

Like this here?

$(document).ready(function() {

    $('input[class="foo"]').attr('value', $(this).attr('placeholder')).focus(function() {
        if ($(this).val('placeholder')) {
            $(this).attr('value', '');
        }
    }).blur(function() {
        if ($(this).val() == '') {
            $(this).attr('value', $(this).attr('placeholder'))
        }
    });
});

EDIT: Updated code and fiddle with suggestions provided by Christopher Ramírez