Как передать данные из одной формы в другую

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

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

Используя jQuery

<form>
    <input type="text" id="form-value-1" value="">
    <input type="text" id="form-value-2" value="">
    <div class="send-them">Отправить</div>
</form>

<form>
    <input type="text" id="form-value-3" name="Имя" type="hidden" value="">     <!-- скрыто -->
    <input type="text" id="form-value-4" name="Телефон" type="hidden" value=""> <!-- скрыто -->
    <input type="text" name="Адрес">
    <textarea name="Сообщение"></textarea>
</form>

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

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

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

Результат


Отправить

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

Нативный JavaScript

<form>
    <input type="text" id="form_value_1" value="">
    <input type="text" id="form_value_2" value="">
    <div id="sendValues">Отправить</div>
</form>

<form>
    <input type="hidden" id="form_value_3" name="Фамилия" value="">  <!-- скрыто -->
    <input type="hidden" id="form_value_4" name="Имя" value="">      <!-- скрыто -->
    <input type="text" name="Возраст">
    <textarea name="Сообщение"></textarea>
</form>
const sendValues = document.querySelector('#sendValues');
sendValues.addEventListener('click', function(e){
    form_value_3.value = form_value_1.value;
    form_value_4.value = form_value_2.value;
});

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

Изучаем английский
EnglishRussian
InputВвод, вводить
ValueЗначение
Text areaТекстовая область
20/09/2019 19:33
admin