I am using placeholder attribute provided in html 5 to get placeholder effect.
<input id="search" class="hasPlaceholder" type="text" placeholder="Personal Trainer"
value="" name="search">
also I have added code to clear the placeolder on submit.
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder'));
$(this).addClass('hasPlaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() {
var input = $(this);
input.removeClass('hasPlaceholder');
if (input.val() == input.attr('placeholder')) {
input.removeAttr('placeholder');
input.val("");
}
});
});
}
});
but still it gives placeholder value after submit.