Невозможно передать входное значение другому входному значению через JavaScript

Question

Я хотел передать значение поля ввода в другое поле ввода со значением через javascript. Я написал код, как показано ниже.

Первый ввод:

<input type="text" class="form-control" id="recipient" name="recipientName" value="RecipientName" onkeyup="recipient()"/>

Второй вход:

<input type="hidden" id="recipientHidden" name="recipientName"/>

Js код

function recipient(){
   var recipientNameValue = document.getElementById('recipient').value;
   document.getElementById('recipientHidden').value = recipientNameValue;
   console.log(document.getElementById('recipientHidden').value);
}

Когда я открываю консоль, в консоли нет значения. Когда я нажимаю на первое поле ввода, значение печатается.

Как я могу получить это мгновенно?

Answer 1

Самый простой способ - добавить событие в скрипт:

// initialize default hidden value 
$('#recipientHidden').val($('#recipient').val());

// a new value
 $('#recipient').on('keyup',function(){
        $('#recipientHidden').val($('#recipient').val());
    });

В этом случае вам не нужно добавлять событие на вход.

Answer 2

Ваш код работает нормально, но он будет регистрировать только значение ключа.Вы можете сразу записать значение, вызвав функцию recipient() сразу:

function recipient() {
  var recipientNameValue = document.getElementById('recipient').value;
  document.getElementById('recipientHidden').value = recipientNameValue;
  console.log(document.getElementById('recipientHidden').value);
}

// Call function straight away
recipient()

<input type="text" class="form-control" id="recipient" name="recipientName" value="RecipientName" onkeyup="recipient()" />

<input type="hidden" id="recipientHidden" name="recipientName" />