Как объединить два поля формы с помощью JS

#javascript #html #jquery #forms

#javascript #HTML #jquery #формы

Вопрос:

У меня есть форма регистрации в Joomla с несколькими повторяющимися полями. Что я хочу сделать, так это объединить два поля формы «Имя» и «Фамилия» в 3-е поле «Имя» с пробелом между ними..

Я использую этот код для дублирования поля пароля, и он работает для одного поля. но я не могу объединить 2 поля..

 jQuery(function() { 
jQuery("#password_field").change(function() { 
jQuery('#password2_field').val(this.value);});
});

Есть ли какой-нибудь способ объединить 2 поля в 3-е?

Ответ №1:

 $(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>

Привет, вы можете использовать что-то вроде этого.

1. Это хорошее решение. Но если вы используете on input вместо on change event, ваше поле taget (объединенное) будет обновляться автоматически во время ввода вместо потери фокуса

2. привет. спасибо. поскольку я использую это в форме joomla, я не могу редактировать классы полей, и, как я вижу, вы используете общий класс «autoMerge».. я могу получить все поля только с отдельными идентификаторами

3. Можете ли вы использовать идентификаторы?

4. ДА.. я могу получить все 3 поля только с разными идентификаторами..

5. хорошо, я изменяю код, который вы можете проверить, пока

Ответ №2:

попробуйте сделать что-то вроде этого:

 var firstName= document.getElementById('firstName').value;
var lastName= document.getElementById('lastName').value;
var mergeName= firstName   " "   lastName;
document.getElementById('mergeName').innerHTML= mergeName;

1. привет .. я пытаюсь добавить это на свой сайт, но, похоже, это не работает.. я изменил идентификаторы для своих, но, возможно, мне нужно добавить что-то еще?? вы можете увидеть это здесь после того, как поместите какой-либо товар в корзину — 2.svet-vciel.sk/index.php?option=com_virtuemartamp;view=cart 2 поля источника находятся после электронной почты