Вам не нужен jQuery для этого.Я предоставил решение с использованием jQuery, а также ванильного JavaScript.
jQuery Version
$(document).ready(function(){
$email = $('#email')
// Note that we are updating the hidden input value each time the
// text input value changes. We could do this less frequently by
// using the `input` or `change` event instead of the `keyup` event.
$email.on('keyup', function(e){
$('#userId').val($email.val())
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="email" id="email" />
<input type="hidden" name="userId" id="userId" />
<button type="submit" id="submit">Submit</button>
</form>
Версия JavaScript Vanilla
document.addEventListener('DOMContentLoaded', function(e) {
var txtEmail = document.querySelector('#email')
var txtUserId = document.querySelector('#userId')
// Note that we are updating the hidden input value each time the
// text input value changes. We could do this less frequently by
// using the `input` or `change` event instead of the `keyup` event.
txtEmail.addEventListener('keyup', function(e) {
txtUserId.value = txtEmail.value
})
})
<form>
<input type="text" name="email" id="email" />
<input type="hidden" name="userId" id="userId" />
<button type="submit" id="submit">Submit</button>
</form>
Краткое объяснение моего метода
Ожидание загрузки HTML
Независимо от того, используете ли вы jQuery или нет, в зависимости от того, как ваш JavaScript и HTML-код сшиты друг с другом, иногда ваши HTML-элементы недоступны, когда ваш код JavaScript выполняется (например, если ваш код JavaScript включен втег <head>, который, я думаю, стал довольно необычным в наши дни).По этой причине я привык проверять готовность документа, прежде чем ссылаться на какие-либо элементы HTML.Используя jQuery, это делается с помощью следующего кода:
$(document).ready(function(){
// The code here (inside this function) will be executed after the HTML finishes loading.
})
При использовании vanilla JavaScript код выглядит следующим образом:
document.addEventListener('DOMContentLoaded', function(){
// The code here (inside this function) will be executed after the HTML finishes loading.
})
Создание обновлений как можно скорее
Кроме того, мой код обновляет скрытое значение ввода после изменения значения ввода текста, а не ожидает отправки формы.Любой вариант может быть вполне приемлемым для данной ситуации.Я имею обыкновение обновлять подобные вещи как можно скорее;если в будущем я напишу некоторый код JavaScript, который ожидает, что их значение для элементов управления вводом будет эквивалентным, и этот код будет запущен до отправки формы, у меня, вероятно, будет ошибка в моем коде.Поэтому я считаю, что безопаснее просто обновлять, как только происходит изменение.