Содержание
- 1. Отдельная кнопка
- 2. Скрытая форма
Иногда возникает вопрос – как отправить HTML-форму в новую вкладку браузера, например для отдельной страницы, где будет печать введённых данных? Как и у ссылки, у элемента можно применить атрибут 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>Минусом является то, что при нажатии любой кнопки type="submit"форма отправится в новую вкладку браузера.
1. Отдельная кнопка
Если требуется разделить события кнопок, то можно добавлять атрибут 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>2. Скрытая форма
Следующий вариант поможет, когда нужно отправить форму в новую вкладку и на другой 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>