Рассмотрим, как передать данные из одной формы в другую используя jQuery

Ситуация следующая: у нас есть две формы. При заполнении и отправке первой формы значения полей будут передаваться второй форме, а уж при отправке второй формы данные будут отправлены на почту.

Первый вариант

Обычная структура.

<form>
  <input type="text" value="" id="form-value-1" name="name">
  <input type="text" value="" id="form-value-2" name="phone">
  <div class="send-them">Поехали!</div>
</form>
<form>
  <input type="text" value="" id="form-value-3" name="name" type="hidden"> //скрыто
  <input type="text" value="" id="form-value-4" name="phone" type="hidden"> //скрыто
  <textarea name="message"></textarea> //новое поле
  <input type="text" name="email"> //новое поле
</form>

Js-код будет следующим:

$(function(){
  $('.send-them').click(function(){
    $('#form-value-3').val( $('#form-value-1').val() );
    $('#form-value-4').val( $('#form-value-2').val() );
  });
});

Обратите внимание, должен быть подключен jQuery

Результат


Отправить

При решении такой задачи поля я оставил открытыми для наглядности. Но данным полям нужно добавлять type="hidden" - чтобы они были не видны для пользователя.

Второй вариант

<form>
  <input type="text" value="" id="form_value_1" name="name">
  <input type="text" value="" id="form_value_2" name="phone">
  <div class="send-values">Поехали!</div>
</form>
<form>
  <input type="text" value="" id="form_value_3" name="surname"> //скрыто
  <input type="text" value="" id="form_value_4" name="email"> //скрыто
  <textarea name="message"></textarea> //новое поле
  <input type="text" name="email"> //новое поле
</form>
$(function(){
  $('.send-values').click(function(){
    form_value_3.value = form_value_1.value;
    form_value_4.value = form_value_2.value;
  });
});

Передача значений из одной формы в другую происходит путём присвоения значений одной формы другой после отправки формы (или нажатия на кнопку).

Изучаем английский
EnglishRussian
InputВвод, вводить
ValueЗначение
Text areaТекстовая область
➤ ➤