提交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

Answers:


220

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

要么

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

到表单的定义。


请记住将属性id添加到form元素,否则即使关闭了弹出窗口阻止程序,该功能也无法在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优于接受的答案,因为它实际上将结果放入带有OP所需选项的弹出窗口中。
妮可

在IE上对我不起作用-它会创建一个具有指定属性的新窗口,然后将结果加载到另一个新窗口中,而将先前的窗口留空。
mjaggard 2011年

1
@mjaggard:您添加了什么?建议对此答案进行编辑。
迈克尔·迈尔斯

3
@SaurabhNanda至于我可以告诉大家,target在属性form元素不会被弃用HTML 4.01过渡,显然是留在HTML 5
Marko Dumic

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 2012年

我认为附加表格后,这是不完整的,您应该将其删除以取得最佳效果。
ncubica 2012年

@theJollySin:通过在标记上调用jQuery,它将变成一个真正的DOM元素,并且在插入DOM时将被关闭。
Janus Troelsen

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 2010年

1

流量窗口最简单的工作解决方案(在Chrome上测试):

<form action='...' method=post target="result" onsubmit="window.open('','result','width=800,height=400');">
    <input name="..">
    ....
</form>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.