フォーム送信時に新しいウィンドウを開く方法

Question

投稿フォームがあり、ユーザーがフォームを送信したときに新しいウィンドウを開き、分析でそれを追跡できるようにします。

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

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

window.openはGoogleのそれは、すべてのブラウザーでは動作しません、あなたは正しいダイアログの種類を検出する方法を見つけるだろう。

また、入力ボタンにonclickコールを移動すると、ユーザーが送信したときにのみ起動されます。

Answer 3

あなたが指定したコードは修正する必要があります。 formタグでは、onClickのは、二重引用符で属性値を同封する必要があります。

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

はまたwindow.openの最初のパラメータはまた、引用符を使用して囲む必要があります世話をする必要があります。

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

これにも解決策が見つかりました。このページは今日私を助けましたので、私もここに再投稿しています。

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

上記のコードは、1つのボタンのコードです。ボタンを押すと、現在の画面が購入から承認前に再描画されます。同時に、新しいウィンドウを開き、その新しいウィンドウをPayPalに渡します。

Answer 6

私は、通常、新しいタブ/ウィンドウで外部リンクを開くために、小さなjQueryスニペットをグローバルに使用します。私は自分のサイトのフォームのためのセレクタを追加しましたし、それは今のところ正常に動作します：

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

Answer 7

データベースのデータのプリントアウトを表示するには、ポップアップウィンドウを使用するWebベースのデータベース・アプリケーションでは、これは（クローム48でテスト）私たちのニーズに十分に働いていた...

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

トリックはonsubmitハンドラでwindow.openコールで第二引数で<form>タグにtarget属性を一致させることです。

Answer 8

フォームのtarget属性と同様の効果を得るには、formtarget属性をinput[type="submit]"またはbutton[type="submit"]とすることもできます。

MDNから：

...この属性は、フォームの送信後に受信された応答を表示するように指示する名またはキーワードです。これは、ブラウジングコンテキストの名前またはキーワードです（たとえば、タブ、ウィンドウ、またはインラインフレーム）。この属性を指定すると、要素のフォーム所有者のターゲット属性がオーバーライドされます。次のキーワードは特別な意味を持ちます：

• _self：レスポンスを現在のものと同じブラウズコンテキストにロードします。属性が指定されていない場合は、この値がデフォルトです。
• _blank：名前のない新しいブラウズコンテキストにレスポンスを読み込みます。
• _parent：レスポンスを現在のブラウジングコンテキストに読み込みます。親がない場合、このオプションは_selfと同じように動作します。
• _top：レスポンスを最上位のブラウジングコンテキスト（現在のものの祖先であり、親を持たないブラウジングコンテキスト）にロードします。親がない場合、このオプションは_selfと同じように動作します。