Заполнение текстового поля после нажатия на флажке с JAVASCRIPT

Question

У меня есть следующие текстовые входы для имени и фамилии в форме:

<label>First name: </label></td> 
<input type="text" name="firstName"> 
<label>Last name: </label></td> 
<input type="text" name="lastName"></td> 

Тогда у меня есть еще один ввод текста для держателя кредитной карты, затем флажок:

<input type="text" size="20" id="nameOnCard" name="nameOnCard" data-stripe="name"/></td> 
<input type="checkbox" id="sameNameOnCard"> 

Я хотел бы вход #nameOnCard получить пополнится Имя и Фамилия всякий раз, когда пользователь нажимает на флажок.

Я начал с некоторым сценарием, как это:

$(document).ready(function(){ 
    $("#sameNameOnCard").click(function(){ 

Как я должен извлекать информацию из флиртует и фамилиям и подключить его в поле nameOnCard?

Спасибо!

Answer 1

Try:

$(document).ready(function(){ 
    $("#sameNameOnCard").on("click", function() { 
     var firstName, lastName; 
     if ($(this).is(":checked")) { 
      firstName = $('[name="firstName"]').val(); 
      lastName = $('[name="lastName"]').val(); 
      $("#nameOnCard").val(firstName + " " + lastName).prop("readonly", true); 
     } else { 
      $("#nameOnCard").val("").prop("readonly", false); 
     } 
    }); 
}); 

DEMO:http://jsfiddle.net/hF26S/1/

Он будет получать первые и последние элементы имен с JQuery "атрибут равен" селектор (потому что единственный способ получить их по name атрибут), получите их значения с помощью .val(), а затем установите значение окончательного текстового поля.

Я добавил кое-что еще немного, чтобы установить элемент «nameOnCard» равным readonly, когда флажок установлен, поэтому они не могут вводить его при его проверке.

Если флажок установлен во время клика, он копирует имя и фамилию. Если флажок снят, он устанавливает значение пустым.

Ссылки:

• http://api.jquery.com/attribute-equals-selector/
• http://api.jquery.com/prop/

Answer 2

Попробуйте это

$(document).ready(function(){ 
     $("#sameNameOnCard").click(function(){ 
     if($(this).is(":checked")) 
     { 
      $("#nameOnCard").val($("input:[name=firstName]").val() + " " + $("input:[name=lastName]").val()); 
     } 
     else 
     { 
       $("#nameOnCard").val(""); 
     } 
    });