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

Иногда возникает вопрос – как отправить 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
15.02.2022, обновлено 03.04.2022
1302

Комментарии

, чтобы добавить комментарий.

Другие публикации

Как сделать редирект PHP
На страницах сайтов постоянно что-то добавляется, удаляется и обновляется, чтобы в поисковиках была только актуальная информация и нужные страницы не выпадали из поиска применяются редиректы.
9692
+1
Загрузка файлов на сервер PHP
В статье приведен пример формы и php-скрипта для безопасной загрузки файлов на сервер, возможные ошибки и рекомендации при работе с данной темой.
53783
+20
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
30321
+31
Блокировка многократной отправки формы
Из-за отправки файла, медленного интернета или тормозящего браузера, пользователь может нажать кнопку отправки формы...
7925
+3
Примеры отправки AJAX JQuery
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
189353
+27
Модальные окна на Fancybox 2
Fancybox 2 не только плагин галерей, но и модальных окон, рассмотрим подробнее.
16554
+5