Отправка формы в новую вкладку браузера

15.02.2022

5899

Иногда возникает вопрос – как отправить HTML-форму в новую вкладку браузера, например для отдельной страницы, где будет печать введённых данных?

Как и у ссылки, у элемента <form> можно применить атрибут target (валидный только в HTML-5), который устанавливает поведение окна, при отправки формы.

Возможные значения:

`_blank`	Загружает страницу в новое окно браузера
`_self`	Загружает страницу в текущее окно (значение по умолчанию)
`_parent`	Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как `_self`
`_top`	Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как `_self`.

Пример:

<form action="" method="post" target="_blank">
	<input type="text" name="name">
	<input type="text" name="surname">		
	
	<button type="submit" name="print">Распечатать</button>
	<button type="submit" name="send">Далее</button>
</form>

HTML

Минусом является то, что при нажатии любой кнопки type="submit" форма отправится в новую вкладку браузера.

Отдельная кнопка

Если требуется разделить события кнопок, то можно добавлять атрибут target="_blank" только при нажатии на кнопку «Распечатать» и после отправки формы его удалять с помощью JQuery.

<form action="" method="post">
	<input type="text" name="name">
	<input type="text" name="surname">		
	
	<button type="button" name="print">Распечатать</button>
	<button type="submit" name="send">Далее</button>
</form>	

<script>
$(document).ready(function(){
	$("input[name='print']").click(function(){
		var form =  $(this).closest('form');
		form.attr('target', '_blank');
		form.submit();
		form.attr('target', '');
	});
	return false;
});
</script>

HTML

Скрытая форма

Следующий вариант поможет, когда нужно отправить форму в новую вкладку и на другой URL. В данном примере все поля основной формы копируются в скрытую.

<form style="display: none;" action="/new.php?print=1" target="_blank" method="post" id="form-print"></form>	

<form action="" method="post" id="form-original">
	<input type="text" name="name">
	<input type="text" name="surname">		
	
	<button type="button" name="print">Распечатать</button>
	<button type="submit" name="send">Далее</button>
</form>	

<script>
$(document).ready(function(){
	$("input[name='print']").click(function(){
		$('#form-print').html($('#form-original').html());
		$('#form-print').submit();
	});
	return false;
});
</script>

HTML