如何在表单提交时打开一个新窗口

我有一个提交表单，并希望它打开一个新的窗口，当用户提交表单，这样我就可以跟踪它的分析。

下面是我使用的代码:

<form action="http://URL at mailchimp subscriber URL.com" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" onclick=window.open(google.html,'','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');>
<label for="name">Your Name</label><input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
<br/>
<br/>
<label for="email">Your Email </label><input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<br/>
<br/>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="submit">
</form>
</div>
342143 次浏览
小开

不需要 Javascript，只需要在表单标记中添加一个 target="_blank"属性。

<form target="_blank" action="http://example.com"
method="post" id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form" class="validate"
>
小开

window.open不能在所有的浏览器上工作，谷歌一下，你会发现一种检测正确对话框类型的方法。

此外，将 onclick 调用移动到输入按钮，使其只在用户提交时触发。

小开

您给出的代码需要更正。在表单标记中，必须用双引号括起 onClick 属性值:

"window.open('google.htm','','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');"

您还需要注意，window.open的第一个参数也应该用引号括起来。

小开

onclick可能不是附加该操作的最佳事件。任何时候任何人单击表单中的任何地方，它都会打开窗口。

<form action="..." ...
onsubmit="window.open('google.html', '_blank', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');return true;">
小开

我通常使用一个小的 jQuery 片段在全局范围内打开新的选项卡/窗口中的任何外部链接。我已经为我自己的站点添加了一个表单选择器，到目前为止它运行良好:

// URL target
$('a[href*="//"]:not([href*="'+ location.hostname +'"]),form[action*="//"]:not([href*="'+ location.hostname +'"]').attr('target','_blank');
小开

在一个基于 Web 的数据库应用程序中，它使用一个弹出窗口来显示数据库数据的打印输出，这对我们的需求来说已经足够好了(在 Chrome 48中测试过) :

<form method="post"
target="print_popup"
action="/myFormProcessorInNewWindow.aspx"
onsubmit="window.open('about:blank','print_popup','width=1000,height=800');">

诀窍是将 <form>标记上的 target属性与 onsubmit处理程序中的 window.open调用中的第二个参数相匹配。

小开

对于与表单的 target属性类似的效果，还可以使用 input[type="submit]"或 button[type="submit"]的 formtarget属性。

来自 MDN:

... 此属性是一个名称或关键字，指示在何处显示提交表单后收到的响应。这是浏览上下文(例如，制表符、窗口或内联框架)的名称或关键字。如果指定了此属性，它将重写元素表单所有者的目标属性。以下关键词具有特殊含义:

  • _ self: 将响应加载到与当前响应相同的浏览上下文中。如果未指定属性，则此值为默认值。
  • _ space: 将响应加载到一个新的未命名浏览上下文中。
  • _ father: 将响应加载到当前响应的父浏览上下文中。如果没有父选项，则此选项的行为方式与 _ self 相同。
  • _ top: 将响应加载到顶级浏览上下文中(即，作为当前上下文的祖先、没有父上下文的浏览上下文)。如果没有父选项，则此选项的行为方式与 _ self 相同。
小开

我相信这个 jquery 对你很有用，请检查下面的代码。

这将使您的提交操作工作，并打开一个新的选项卡中的链接，无论您想打开动作网址或新的链接

jQuery('form').on('submit',function(e){
setTimeout(function () { window.open('https://www.google.com','_blank');}, 1000);});})

这个代码对我来说是完美的. 。


提交答案