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

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

这是我正在使用的代码:

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

不需要Javascript,你只需要在你的表单标签中添加一个target="_blank"属性。

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

在基于Web的数据库应用程序中,使用popup窗口显示数据库数据的打印输出,这对我们的需求已经足够好了(在Chrome 48中进行了testing)…

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

诀窍是在onsubmit处理程序中将<form>标记上的target属性与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;"> 

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

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

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

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

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

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

来自MDN :

…此属性是一个名称或关键字,指示提交表单后收到的回复的显示位置。 这是浏览上下文的名称或关键字(例如,选项卡,窗口或内联框架)。 如果指定了该属性,则将覆盖元素表单所有者的目标属性。 以下关键字具有特殊含义:

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

window.open不适用于所有的浏览器,谷歌它,你会发现一种方法来检测正确的对话框types。

此外,将onclick调用移动到inputbutton,只有当用户提交时才会触发。

我也find了解决办法。 这个页面今天帮了我,所以我也在这里重新张贴。

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

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