Після надсилання форми 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');

2
Зверніть увагу , що document.body.appendChild(form) це необхідно, см stackoverflow.com/q/42053775/58241
benrwb

Відповіді:


220

Додайте

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

або

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

до визначення вашої форми


Не забудьте додати ідентифікатор атрибута до елемента форми, інакше це не працює в браузері Safari, навіть якщо блокувальник спливаючих вікон вимкнено. <form id = "popupForm" target = "_ blank" ...> </form>
Naren

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 - воно створює нове вікно із зазначеними атрибутами, а потім завантажує результати в інше нове вікно, залишаючи попереднє вікно порожнім.
mjaggard

1
@mjaggard: Що ти додав? Можливо, варто запропонувати змінити цю відповідь.
Майкл Майерс

3
@SaurabhNanda Наскільки я можу сказати, targetатрибут formелемента не застарілий у HTML 4.01 Перехідний і, мабуть, повинен залишатися в HTML 5 .
Марко Думіч

1
Попередження: я повинен був прикласти свою форму до документу до того, як це запрацює (у FF 17). Створити фрагмент і спробувати його збіг не вийшло.
недійсна

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.
Janus Troelsen

1
Я думаю, що немає додаткаTo ('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>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.