После отправки формы POST откройте новое окно с результатами

149

Запрос на публикацию в JavaScript, такой как отправка формы, показывает, как отправить форму, созданную вами через POST в JavaScript. Ниже мой модифицированный код.

var form = document.createElement("form");

form.setAttribute("method", "post");
form.setAttribute("action", "test.jsp");

var hiddenField = document.createElement("input");  

hiddenField.setAttribute("name", "id");
hiddenField.setAttribute("value", "bob");
form.appendChild(hiddenField);
document.body.appendChild(form); // Not entirely sure if this is necessary          
form.submit();

То, что я хотел бы сделать, это открыть результаты в новом окне. В настоящее время я использую что-то вроде этого, чтобы открыть страницу в новом окне:

onclick = window.open(test.html, '', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');
user4642212
источник
2
Обратите внимание , что document.body.appendChild(form) это необходимо, см stackoverflow.com/q/42053775/58241
benrwb

Ответы:

220

Добавить

<form target="_blank" ...></form>

или

form.setAttribute("target", "_blank");

к определению вашей формы.

liggett78
источник
Не забудьте добавить идентификатор атрибута в элемент формы, иначе это не работает в браузере Safari, даже если блокировщик всплывающих окон выключен. <form id = "popupForm" target = "_ blank" ...> </ form>
Нарен
131

Если вы хотите создать и отправить свою форму из Javascript, как есть в вашем вопросе, и вы хотите создать всплывающее окно с пользовательскими функциями, я предлагаю это решение (я помещаю комментарии над добавленными мной строками):

var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "test.jsp");

// setting form target to a window named 'formresult'
form.setAttribute("target", "formresult");

var hiddenField = document.createElement("input");              
hiddenField.setAttribute("name", "id");
hiddenField.setAttribute("value", "bob");
form.appendChild(hiddenField);
document.body.appendChild(form);

// creating the 'formresult' window with custom features prior to submitting the form
window.open('test.html', 'formresult', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');

form.submit();
Марко Думич
источник
18
+1 Лучше, чем принятый ответ, так как он фактически выводит результат во всплывающем окне с параметрами, которые хотел ОП.
Николь
У меня не работает в IE - он создает новое окно с указанными атрибутами, а затем загружает результаты в другое новое окно, оставляя предыдущее окно пустым.
Мяггард
1
@mjaggard: что ты добавил? Возможно, стоит предложить изменить этот ответ.
Майкл Майерс
3
@SaurabhNanda Насколько я могу судить, targetатрибут formэлемента не устарел в HTML 4.01 Transitional и, очевидно, должен оставаться в HTML 5 .
Марко Думик
1
Предупреждение: я должен был прикрепить свою форму к телу документа, прежде чем это сработает (в FF 17). Создание фрагмента и попытка его суммировать не сработало.
voidstate
8
var urlAction = 'whatever.php';
var data = {param1:'value1'};

var $form = $('<form target="_blank" method="POST" action="' + urlAction + '">');
$.each(data, function(k,v){
    $form.append('<input type="hidden" name="' + k + '" value="' + v + '">');
});
$form.submit();
Лучаниновыми
источник
Я что-то упустил или вам все еще нужен .appendзакрывающий тег?
theJollySin
Я думаю, что это неполное после добавления формы, вы должны удалить ее для лучшей практики.
ncubica
@theJollySin: вызов jQuery для тега превращает его в настоящий элемент DOM и закрывает при вставке в DOM.
Янус Троелсен
1
Я думаю, что отсутствует appendTo ('body'), и последняя строка должна быть записана как:$form.appendTo('body').submit();
PBrockmann
1

Я знаю этот основной метод:

1)

<input type=”image src=”submit.png”> (in any place)

2)

<form name=”print”>
<input type=”hidden name=”a value=”<?= $a ?>”>
<input type=”hidden name=”b value=”<?= $b ?>”>
<input type=”hidden name=”c value=”<?= $c ?>”>
</form>

3)

<script>
$(‘#submit’).click(function(){
    open(”,”results”);
    with(document.print)
    {
        method = POST”;
        action = results.php”;
        target = results”;
        submit();
    }
});
</script>

Работает!

Эду Каррега
источник
3
вот с jquery! он просит чистый JS
Aviatrix
1

Простейшее рабочее решение для окна потока (протестировано в Chrome):

<form action='...' method=post target="result" onsubmit="window.open('','result','width=800,height=400');">
    <input name="..">
    ....
</form>
Григорий Кислин
источник