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


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>

回答:


272

JavaScriptは必要ありませんtarget="_blank"。フォームタグに属性を追加するだけです。

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

5
この投稿を偶然見つけました。target = "_ blank"をフォームタグに追加すると、新しいウィンドウを開く必要があるという私の問題が解決しました。
kaitlynjanine 2012

3
これは、OPの質問に正確に答えるものではありませんが、一般的target="_blank"にはJavaScriptの代わりに使用する方が便利な答えです
Kip

2
target = "blank"は問題なく動作します。 developer.mozilla.org/en-US/docs/HTML/Element/form
Eric

5
少なくともIE 11では、target = "_ blank"は新しいブラウザーウィンドウを作成するのではなく、現在のブラウザーウィンドウに新しいタブを作成します。私見、新しいタブは新しいブラウザーウィンドウとは異なります
Marcelo Bezerra

33

ポップアップウィンドウを使用してデータベースデータの印刷出力を表示する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>2番目の引数と一致させることです。window.openonsubmit


これにより、ウィンドウサイズを制御できます。優れた。
チョーキー2016

このページの最適なソリューションは、それをテストし、完璧に動作します。
Manny Ramirez

これは、送信時に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がうまく機能すると信じています。以下のコードを確認してください。

これにより、送信アクションが機能し、アクションURLを再度開くか、新しいリンクを開くかを問わず、新しいタブでリンクが開きます。

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

このコードは完璧に動作します。


-4

window.open すべてのブラウザーで機能するわけではありません。Googleを使用すると、正しいダイアログタイプを検出する方法が見つかります。

また、onclick呼び出しを入力ボタンに移動して、ユーザーが送信したときにのみ呼び出されるようにします。


1
入力ボタンのonclickが間違っています。次に、ユーザーがそれをクリックしても、リリースする前に離れた場合は、まだ起動します。
Matthew Flaschen、2009年

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

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


5
OPは、コードが初めてだと言っています-IMOがPaypalボタンに関連する(ひどくフォーマットされた)コードの全負荷を投稿しても、助けにはなりません
Mike
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.