Как передать данные из одной формы в другую
Рассмотрим, как передать данные из одной формы в другую используя 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;
});Передача значений из одной формы в другую происходит путём присвоения значений одной формы другой после отправки формы (или нажатия на кнопку).
| English | Russian |
|---|---|
| Input | Ввод, вводить |
| Value | Значение |
| Text area | Текстовая область |
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии
- Комментариев пока нет.