JQuery Question - добавить значение в скрытое поле ввода?

Question

У меня есть три поля формы: имя, имя и фамилия. Поле имени скрыто, и я пытаюсь установить значение для первого имени + последнего имени при нажатии клавиши. Я также пытаюсь отформатировать его так, чтобы символы были в нижнем регистре, а пробелы преобразуются в тире.

Итак:

<input type="text" name="firstname" value="John John" /> 
<input type="text" name="lastname" value="Doe" /> 
<input type="hidden" name="name" value="john-john-doe" /> 

Я пытался использовать следующий код, но он не работает ...

  $('input[name=field_firstname[0][value]]').keyup(function() { 
        var firstname = $('input[name=field_firstname[0][value]]').val(); 
        var lastname = $('input[name=field_lastname[0][value]]').val(); 
        $('input[name=name]').val(firstname.replace(/\s/g, "-").toLowerCase()+lastname.replace(/\s/g, "-").toLowerCase()); 
      }); 

      $('input[name=field_lastname[0][value]]').keyup(function() { 
        var firstname = $('input[name=field_firstname[0][value]]').val(); 
        var lastname = $('input[name=field_lastname[0][value]]').val(); 
        $('input[name=name]').val(firstname.replace(/\s/g, "-").toLowerCase()+lastname.replace(/\s/g, "-").toLowerCase()); 
      }); 

Answer 1

Может быть, я не хватает какой-то контекст, но я не думаю, что вы могут использовать селектора атрибутов, подобные этому. Чтобы попасть в поле firstname, вы должны сказать: input[name='firstname'].

Вы также делаете то же самое дважды, что всегда является хорошей причиной, чтобы придать чему-то дополнительную мысль. Например, вы можете сделать оба keyup с в одном кадре:

$("input[name='firstname'], input[name='lastname']").keyup(...); 

Вы можете сделать вещи намного проще с помощью идентификаторов, хотя. Например, возьмем этот HTML:

<input type="text" name="firstname" id="firstname" value="John John" /> 
<input type="text" name="lastname" id="lastname" value="Doe" /> 
<input type="hidden" name="name" id="sanitized_name" value="john-john-doe" /> 

Вы бы использовать следующий код Snippit:

$('#firstname, #lastname').keyup(function() { 
    var fullname = $('#firstname').val() + ' ' + $('#lastname').val(); 
    $('#sanitized_name').val(fullname.replace(/\s/g, '-').toLowerCase()); 
}); 

Answer 2

Omit [0][value] как в:

$('input[name=field_firstname]') // removed [0][value] 

Не совсем уверен, почему вы это положили.

Кроме того, вы можете использовать .blur() вместо .keyup(), что избавит вас от лишнего повторения. Еще лучше, разделите поля на .submit(), потому что это так, когда вам все равно. Подумайте об этом, «Jhon Doe» означает 16 поисковых запросов и 8 конкатенаций при использовании .keyup() вместе с процессами jQuery, чтобы это сделать.

добавление

Видя это несколько раз сейчас, люди ставят неверные/проблемные символы внутри идентификатор атрибуты, как [0][value], это является недопустимым для JQuery, как он распознает его как выражение CSS, а затем часть идентификатора. document.getElementById("bla[0]"); это похоже на работу, однако, так что если вам действительно нужно (или слишком ленивы, чтобы исправить это), вы можете сделать следующее:

$(document.getElementById("bla[0][value]")) //etc