jQuery - передача значения от одного входа к другому

Question

У меня есть форма с несколькими полями ввода, которые title, name, address и т. Д.

Что я хочу сделать, это получить эти значения и «поместить их» в значениядругих полей ввода.Например,

<label for="first_name">First Name</label>
<input type="text" name="name" />

<label for="surname">Surname</label>
<input type="text" name="surname" />

<label for="firstname">Firstname</label>
<input type="text" name="firstname" disabled="disabled" />

Итак, если я введу John в поле first_name, тогда значение firstname также будет John.

Большое спасибо

Answer 1

Предполагая, что вы можете поставить идентификаторы на входах:

$('#name').change(function() {
    $('#firstname').val($(this).val());
});

Пример JSFiddle

В противном случае вам придется выбирать, используя имена:

$('input[name="name"]').change(function() {
    $('input[name="firstname"]').val($(this).val());
});

Answer 2

Проще, если вы немного измените свой HTML:

<label for="first_name">First Name</label>
<input type="text" id="name" name="name" />

<label for="surname">Surname</label>
<input type="text" id="surname" name="surname" />

<label for="firstname">Firstname</label>
<input type="text" id="firstname" name="firstname" disabled="disabled" />

, тогда это относительно просто

$(document).ready(function() { 
    $('#name').change(function() {
      $('#firstname').val($('#name').val());
    });
});

Answer 3

Добавьте атрибуты ID с теми же значениями, что и атрибуты имени, и тогда вы можете сделать это:

$('#first_name').change(function () {
  $('#firstname').val($(this).val());
});

Answer 4

Получить данные input1 для немедленной отправки их на input2

<div>
<label>Input1</label>
 <input type="text" id="input1" value="">
</div>

</br>
<label>Input2</label>
<input type="text" id="input2" value="">

<script type="text/javascript">
        $(document).ready(function () {
            $("#input1").keyup(function () {
                var value = $(this).val();
                $("#input2").val(value);
            });
        });
</script>