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

Answer 1

不需要Javascript，你只需要在你的表单标签中添加一个

target="_blank"

属性。

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

Answer 2

在使用弹出窗口显示数据库数据打印输出的基于 Web 的数据库应用程序中，这足以满足我们的需求（在 Chrome 48 中测试）：

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

诀窍是将

target

标记上的

<form>

属性与

window.open

处理程序中的

onsubmit

调用中的第二个参数相匹配。

Answer 3

要获得与表单的

target

属性类似的效果，您还可以使用

formtarget

或

input[type="submit]"

的

button[type="submit"]

属性。

来自MDN：

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

• _self：将响应加载到与当前浏览上下文相同的浏览上下文中。如果未指定属性，则此值为默认值。
• _blank：将响应加载到新的未命名浏览上下文中。
• _parent：将响应加载到当前浏览器的父浏览上下文中。如果没有父级，此选项的行为方式与 _self 相同。
• _top：将响应加载到顶级浏览上下文（即当前浏览上下文的祖先浏览上下文，没有父级）。如果没有父级，此选项的行为方式与 _self 相同。

Answer 4

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;">

Answer 5

您提供的代码需要更正。在表单标签中，您必须用双引号将 onClick 属性值括起来：

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

您还需要注意

window.open

的第一个参数也应该用引号引起来。

Answer 6

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

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

Answer 7

赞扬@Awerealis 的真实 php 弹出窗口解决方案。

但是在获得弹出窗口并使用它向我的数据库中插入数据之后，我遇到了让数据库条目的结果页面填满弹出窗口的进一步问题。我希望弹出窗口消失并使用新数据刷新原始（父）页面。

我通过以下方式实现了这一目标：

在父页面（从中发出弹出窗口），我将这段代码添加到元素：

<script>
    window.onunload = refreshParent;
    function refreshParent() {
        window.opener.location.reload();
        window.close();
    }
</script>

在弹出（子）窗口的末尾，我添加了：

<script type="text/javascript">
  window.close();
</script>

返回父页面后，将显示新数据，给人一种从弹出窗口调用 ajax 的感觉，这正是我一直在寻找的。

希望这对某人有帮助。

Answer 8

我相信这个 jquery 很适合你，请检查下面的代码。

这将使您的提交操作有效并在新选项卡中打开链接，无论您是想再次打开操作 url 还是新链接

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

这段代码对我来说很完美..

Answer 9

window.open

不适用于所有浏览器，谷歌它，你会找到一种检测正确对话类型的方法。

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