Jquery appending input values - Not displaying entered values after validation - php

Question

I have registration form on my website that, using jquery I append default values to, and onFocus/blur the default values hide and show accordingly.
My problem is that when the form is submitted and has kicked back errors using php validation, I am unable to show the posted values in the fields. The javascript seems to write over the posted data that is echoed using php in the input value.
When I look at the page source after posting my form I see that in the value of the input I do appear to have the posted value, the value that I want shown. Example:
<input type="text" name="first_name" value="Harry" />
PHP has done it's work in echoing the posted data into the value of my input. Then Javascript changes it so that instead of the user seeing their name (Harry in this example) they once again see the default jquery appended "First name".
This happens even though I have a value in the input.
How can I modify my Javascript to take note of the value of my input and not write over it?
This is the code so far:
$(document).ready(function() {
$('input[name=first_name]').val('First name');
$('input[name=last_name]').val('Last name');
$('input[name=email_address]').val('Email address');
// cache references to the input elements into variables
var passwordField = $('input[name=password]');
var emailField = $('input[name=email_address]');
var firstnameField = $('input[name=first_name]');
var lastnameField = $('input[name=last_name]');
// get the default value for the fields
var emailFieldDefault = emailField.val();
var firstnameFieldDefault = firstnameField.val();
var lastnameFieldDefault = lastnameField.val();
// add a password placeholder field to the html
passwordField.after('<input id="passwordPlaceholder" type="text" value="Password" autocomplete="off" />');
var passwordPlaceholder = $('#passwordPlaceholder');
// show the placeholder with the prompt text and hide the actual password field
passwordPlaceholder.show();
passwordField.hide();
// when focus is placed on the placeholder hide the placeholder and show the actual password field
passwordPlaceholder.focus(function() {
passwordPlaceholder.hide();
passwordField.show();
passwordField.focus();
});
// and vice versa: hide the actual password field if no password has yet been entered
passwordField.blur(function() {
if(passwordField.val() == '') {
passwordPlaceholder.show();
passwordField.hide();
}
});
// when focus goes to and moves away from the fields, reset it to blank or restore the default depending if a value is entered
emailField.focus(function() {
if(emailField.val() == emailFieldDefault) {
emailField.val('');
}
});
emailField.blur(function() {
if(emailField.val() == '') {
emailField.val(emailFieldDefault);
}
});
firstnameField.focus(function() {
if(firstnameField.val() == firstnameFieldDefault) {
firstnameField.val('');
}
});
firstnameField.blur(function() {
if(firstnameField.val() == '') {
firstnameField.val(firstnameFieldDefault);
}
});
lastnameField.focus(function() {
if(lastnameField.val() == lastnameFieldDefault) {
lastnameField.val('');
}
});
lastnameField.blur(function() {
if(lastnameField.val() == '') {
lastnameField.val(lastnameFieldDefault);
}
});
});

Answer 1

$('input[name=first_name]').val('First name');
This unconditionally sets the value of that element to First Name. It's not a "only set the value if it's empty", it's "set the value to First Name, regardless of what it's in there".
You'd need something like this to preserve what's in there:
if ($('input[name=first_name]').val() == '') {
$('input[name=first_name]').val('First name');
}
instead, which would only reset the field's value if it starts out empty.

Answer 2

Just get some placeholder plugin, your code repeat itself too much and still does not do what you need
This is just what you need:
http://plugins.jquery.com/project/input-placeholder
With it your code will look very clear and simple, like:
<input type="text" name="first_name" placeholder="First Name" />
<input type="text" name="last_name" placeholder="Last Name" />
<input type="text" name="email_address" placeholder="Email" />
<script>
$(function(){
$('input[placeholder]').placeholder();
})
</script>
Instead all of your javascript

Answer 3

on ready function your are setting some values before your default values
$('input[name=first_name]').val('First name');
$('input[name=last_name]').val('Last name');
$('input[name=email_address]').val('Email address');
so your defalut values cannot be empty

Answer 4

This is how i would do it so it would be more dynamic and less code.
<input type="text" name="first_name" rel="First Name" value="<?=$first_name?>" />
<input type="text" name="last_name" rel="Last Name" value="<?=$last_name?>" />
<input type="text" name="email" rel="Email" value="<?=$email?>" />
$(function(){
$('input').each(function(){
var val = $(this).val(),
rel = $(this).attr('rel');
$(this).focus(function(){
if(val === rel){
$(this).val('');
}
});
$(this).blur(function(){
if(val === ''){
$(this).val(rel);
}
});
if(val === ''){
$(this).val(rel);
}
});
});

Answer 5

With the minimum changes:
if($('input[name=first_name]').val()!='')
$('input[name=first_name]').val('First name');
if($('input[name=last_name]').val()!='')
$('input[name=last_name]').val('Last name');
if($('input[name=email_address]').val()!='')
$('input[name=email_address]').val('Email address');
Another cool way:
if($('input[name=first_name]').val()!='') {
$('input[name=first_name]').val('First name');
$('input[name=first_name]').class('init');
}
if($('input[name=last_name]').val()!='') {
$('input[name=last_name]').val('Last name');
$('input[name=last_name]').class('init');
}
if($('input[name=email_address]').val()!='') {
$('input[name=email_address]').val('Email address');
$('input[name=email_address]').class('init');
}
var initVals = new Array();
$("form input").each( function (i) { initVals[i] = this.value; } );
$("form input").focus( function () {
if ( $(this).hasClass("init") ){
$(this).removeClass("init");
$(this).val("");
}
} );
$("form input").blur( function (i) {
if ( $(this).val() == "" || $(this).val() == initVals[$("form input").index(this)] ){
$(this).addClass("init");
$(this).val( initVals[$("form input").index(this)] );
};
} );
Don't forget to use hasClass("init") or similar to avoid sending inputs with its default value.