Как объединить два поля формы с помощью JS
У меня есть регистрационная форма в Joomla с несколькими повторяющимися полями. Что я хочу сделать, так это объединить два поля формы «Имя» и «Фамилия» в 3-е поле «Имя» с пробелом между ними.
Я использую этот код для дублирования поля пароля, и он работает для одного поля. но я не могу объединить 2 поля..
jQuery(function() {
jQuery("#password_field").change(function() {
jQuery('#password2_field').val(this.value);});
});
Есть ли способ объединить 2 поля в 3?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
$(document).ready(function(){
$("#FirstName,#LastName").on('keyup',function(){
var firstName = $('#FirstName').val();
var lastName = $('#LastName').val();
$('#mergeName').val(`${firstName} ${lastName}`);
});
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form action = "">
First name: <input type = "text" name = "FirstName" class = "autoMerge" id = "FirstName"><br>
Last name: <input type = "text" name = "LastName" class = "autoMerge" id = "LastName" ><br>
Merged: <input type = "text" name = "mergeName" id = "mergeName"><br>
</form>
</body>Привет, вы можете использовать что-то вроде этого.
привет. Спасибо. поскольку я использую это в форме joomla, я не могу редактировать классы полей, и, как я вижу, вы используете общий класс «autoMerge».. я могу получить все поля только с отдельными идентификаторами
Можно ли использовать id?
да .. я могу получить все 3 поля только с разными идентификаторами ..
хорошо, я изменяю код, который вы можете проверить, пока
Вы можете проверить это сейчас.
попробуйте сделать что-то вроде этого:
var firstName= document.getElementById('firstName').value;
var lastName= document.getElementById('lastName').value;
var mergeName= firstName + " " + lastName;
document.getElementById('mergeName').innerHTML= mergeName;
привет.. я пытаюсь добавить это на свой сайт, но кажется, что это не работает.. я изменил идентификаторы для своего, но, может быть, мне нужно добавить что-то еще ?? вы можете увидеть это здесь после того, как положите товар в корзину - 2.svet-vciel.sk/index.php?option=com_virtuemart&view=cart 2 исходных поля после электронной почты
Это хорошее решение. Но если вы используете
inputвместо событияchange, ваше поле taget (объединенное) будет автоматически обновляться, пока вы печатаете, а не теряете фокус.