如何在表单提交中打开新窗口


127

我有一个提交表单,希望用户提交表单时打开一个新窗口,以便我可以在分析中跟踪它。

这是我正在使用的代码:

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

Answers:


272

无需Javascript,只需target="_blank"在form标记中添加一个属性。

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

5
如果添加target = _blank,则不需要onClick事件。
WhyNotHugo

5
很高兴偶然发现了这个帖子!将target =“ _ blank”添加到表单标签解决了我需要打开新窗口的问题!
kaitlynjanine 2012年

3
这并不能完全回答OP的问题,但它是更通用的答案,target="_blank"而不是Javascript
Kip

2
target =“ blank”可以正常工作。 developer.mozilla.org/zh-CN/docs/HTML/Element/form
Eric

5
至少在IE 11上,target =“ _ blank”在当前浏览器窗口中创建了一个新标签,而不是创建新的浏览器窗口.....恕我直言,新标签与新的浏览器窗口不同
Marcelo Bezerra

33

在基于网络的数据库应用程序中,该应用程序使用弹出窗口显示数据库数据的打印输出,足以满足我们的需求(已在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


这样可以控制窗口大小。优秀的。
Chalky

此页面上的最佳解决方案,对其进行了测试,并且可以完美地工作。
曼尼·拉米雷斯

这正是我在提交PDF到单独的窗口中时要的内容。
jrob007

7

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

7

要获得与表单target属性相似的效果,还可以使用或的formtarget属性。input[type="submit]"button[type="submit"]

MDN

...此属性是名称或关键字,指示提交表单后在何处显示收到的响应。这是浏览上下文(例如,选项卡,窗口或嵌入式框架)的名称或关键字。如果指定了此属性,它将覆盖元素表单所有者的目标属性。以下关键字具有特殊含义:

  • _self:将响应加载到与当前响应相同的浏览上下文中。如果未指定属性,则此值为默认值。
  • _blank:将响应加载到新的未命名浏览上下文中。
  • _parent:将响应加载到当前响应的父浏览上下文中。如果没有父母,则此选项的行为与_self相同。
  • _top:将响应加载到顶级浏览上下文(即,当前上下文的祖先且没有父级的浏览上下文)中。如果没有父母,则此选项的行为与_self相同。

有多个提交按钮时非常有用。
hrvoj3e

看起来他们从输入元素页面中删除了该内容。在按钮元素页面上可以找到关于formtarget属性的类似信息:developer.mozilla.org/en-US/docs/Web/HTML/Element/…–
peater

3

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

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

您还需要注意,第一个参数window.open也应使用引号引起来。


2

我通常在全局范围内使用一个小的jQuery代码段在新标签页/窗口中打开任何外部链接。我已经为自己的网站添加了表单选择器,到目前为止,它可以正常工作:

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

0

我相信这个jquery对您来说很好,请检查以下代码。

无论您要再次打开操作网址还是新链接,这都将使您的提交操作有效并在新标签中打开一个链接

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

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


-4

window.open 不适用于所有浏览器,请使用Google,您会发现一种检测正确对话框类型的方法。

同样,将onclick调用移动到输入按钮,使其仅在用户提交时触发。


1
输入按钮上的onclick错误。然后,如果用户单击它,但是在释放之前移开了它,则它仍然会触发。
马修·弗拉申

-12

我也找到了解决方案。该页面今天对我有帮助,因此,我也在此处重新发布。

/** This is the script that will redraw current screen and submit to paypal. */
echo '<script>'."\n" ;
echo 'function serverNotifySelected()'."\n" ;
echo '{'."\n" ;
echo '    window.open(\'\', \'PayPalPayment\');'."\n" ;
echo '    document.forms[\'paypal_form\'].submit();'."\n" ;
echo '    document.forms[\'server_responder\'].submit();'."\n" ;
echo '}'."\n" ;
echo '</script>'."\n" ;

/** This form will be opened in a new window called PayPalPayment. */
echo '<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" name="paypal_form" method="post" target="PayPalPayment">'."\n" ;
echo '<input type="hidden" name="cmd" value="_s-xclick">'."\n" ;
echo '<input type="hidden" name="custom" value="'.$transaction_start.'">'."\n" ;
echo '<input type="hidden" name="hosted_button_id" value="'.$single_product->hosted_button_id.'">'."\n" ;
echo '<table>'."\n" ;
echo '    <tr>'."\n";
echo '        <td><input type="hidden" name="'.$single_product->hide_name_a.'" value="'.$single_product->hide_value_a.'">Local</td>'."\n" ;
echo '    </tr>'."\n" ;
echo '    <tr>'."\n" ;
echo '        <td>'."\n" ;
echo '        <input type="hidden" name="'.$single_product->hide_name_b.'" value="'.$single_product->hide_value_b.'" />'.$single_product->short_desc.' $'.$adj_price.' USD'."\n" ;
                // <select name="os0">
                //     <option value="1 Day">1 Day $1.55 USD</option>
                //     <option value="All Day">All Day $7.50 USD</option>
                //     <option value="3 Day">3 Day $23.00 USD</option>
                //     <option value="31 Day">31 Day $107.00 USD</option>
                // </select>
echo '        </td>'."\n" ;
echo '    </tr>'."\n" ;
echo '</table>'."\n" ;
echo '<input type="hidden" name="currency_code" value="USD">'."\n" ;
echo '</form>'."\n" ;

/** This form will redraw the current page for approval. */
echo '<form action="ProductApprove.php" name="server_responder" method="post" target="_top">'."\n" ;
echo '<input type="hidden" name="trans" value="'.$transaction_start.'">'."\n" ;
echo '<input type="hidden" name="prod_id" value="'.$this->product_id.'">'."\n" ;
echo '</form>'."\n" ;

/** No form here just an input and a button.  onClick will handle all the forms */
echo '<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" alt="PayPal - The safer, easier way to pay online!" onclick="serverNotifySelected()">'."\n" ;
echo '<img alt="" border="0" src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">'."\n" ;

上面的代码是一个按钮的代码。您按下按钮,它将把当前屏幕从购买状态重新绘制为预先批准状态。同时,它将打开一个新窗口,并将新窗口移交给PayPal。


5
OP表示他们是代码新手-IMO发布与Paypal按钮有关的一整段(可怕格式)代码不会对他们有帮助
-Mike
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.