JQuery добавление входных значений - не отображаются введенные значения после проверки

Question

У меня есть форма регистрации на моем веб-сайте, к которой с помощью jquery я добавляю значения по умолчанию, а onFocus / blur значения по умолчанию скрывают и показывают соответственно.

Моя проблема в том, что когда форма отправляется и возвращает ошибки при проверке php, я не могу показать опубликованные значения в полях. Javascript, кажется, записывает поверх опубликованных данных, которые отображаются с использованием php во входном значении.

Когда я смотрю на источник страницы после публикации своей формы, я вижу, что в значении входных данных у меня действительно есть опубликованное значение, значение, которое я хочу показать. Пример:

<input type="text" name="first_name" value="Harry"  />

PHP выполнил свою работу по отражению опубликованных данных в значении моего ввода. Затем Javascript изменяет его так, чтобы вместо того, чтобы пользователь увидел свое имя (в данном примере Гарри), он снова увидел jquery по умолчанию, добавленный «Имя».

Это происходит, хотя у меня есть значение на входе.

Как я могу изменить свой Javascript, чтобы записать значение моего ввода, а не записывать поверх него?

Это код на данный момент:

$(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');

Это безусловно устанавливает значение этого элемента в First Name. Это не «только установить значение, если оно пустое», это «установить значение на Имя, независимо от того, что там находится».

Вам нужно что-то подобное, чтобы сохранить то, что там есть:

if ($('input[name=first_name]').val() == '') {
    $('input[name=first_name]').val('First name');
}

вместо этого, которое только сбросило бы значение поля, если оно начинается пустым.

Answer 2

Просто возьмите какой-нибудь плагин-заполнитель, ваш код повторяется слишком часто и все еще не делает то, что вам нужно

Это именно то, что вам нужно: http://plugins.jquery.com/project/input-placeholder

С ним ваш код будет выглядеть очень просто и понятно, как:

<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>

Вместо всего вашего javascript

Answer 3

С минимальными изменениями:

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');

Еще один крутой способ:

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)] );       
    };
} );

Не забудьте использовать hasClass ("init") или аналогичный, чтобы избежать отправки входных данных с егозначение по умолчанию.

Answer 4

Вот как я бы это сделал, чтобы он был более динамичным и меньше кода.

<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

в функции готовности вы устанавливаете некоторые значения до значений по умолчанию

$('input[name=first_name]').val('First name');   
$('input[name=last_name]').val('Last name');    
$('input[name=email_address]').val('Email address');

, поэтому значения по умолчанию не могут быть пустыми