Как передать данные из одной формы в другую
Рассмотрим, как передать данные из одной формы в другую используя jQuery, а затем на чистом JavaScript.
Ситуация следующая: у нас есть две формы. При заполнении и отправке первой формы значения полей будут передаваться второй форме, а уж при отправке второй формы данные будут отправлены на почту.
Используя jQuery:
<form>
<input type="text" id="form-value-1">
<input type="text" id="form-value-2">
<div class="send-them">Отправить в последующую форму</div>
</form>
<form>
<input type="text" id="form-value-3" name="Имя" type="hidden""> <!-- скрыто -->
<input type="text" id="form-value-4" name="Телефон" type="hidden"> <!-- скрыто -->
<input type="text" name="Адрес">
<button type="submit">Отправить финальную форму со всеми полями</button>
</form>jQuery код будет следующим:
$(".send-them").click(() => {
$("#form-value-3").val($("#form-value-1").val());
$("#form-value-4").val($("#form-value-2").val());
});Обратите внимание, должен быть подключен jQuery.
Результат:
Нативный JavaScript
Передача значений из одной формы в другую происходит путём присвоения значений одной формы другой после отправки формы (или нажатия на кнопку).
<form>
<input type="text" id="form_value_1">
<input type="text" id="form_value_2">
<div id="sendValues">Отправить</div>
</form>
<form>
<input type="hidden" id="form_value_3" name="Фамилия"> <!-- скрыто -->
<input type="hidden" id="form_value_4" name="Имя"> <!-- скрыто -->
<input type="text" name="Возраст">
<textarea name="Сообщение"></textarea>
</form>const btn_send = document.getElementById("#sendValues");
btn_send.addEventListener("click", () => {
form_value_3.value = form_value_1.value;
form_value_4.value = form_value_2.value;
});Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии (1)
- Анастасия
Спасибо, статья очень помогла, нашла ошибку! Теперь работает