web-dev-qa-db-ja.com

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

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

私が使用しているコードは次のとおりです。

<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>
formssubmit
119
Jack

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

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

ポップアップウィンドウを使用してデータベースデータのプリントアウトを表示するWebベースのデータベースアプリケーションでは、これはニーズに十分対応できました（Chrome 48でテスト済み）：

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

秘Theは、<form>タグのtarget属性を、onsubmitハンドラーのwindow.open呼び出しの2番目の引数と一致させることです。

25
Awerealis

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

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

MDN から：

...この属性は、フォームの送信後に受信した応答を表示する場所を示す名前またはキーワードです。これは、ブラウジングコンテキスト（タブ、ウィンドウ、インラインフレームなど）の名前またはキーワードです。この属性を指定すると、要素のフォーム所有者のターゲット属性が上書きされます。次のキーワードには特別な意味があります。

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

指定したコードを修正する必要があります。フォームタグでは、onClick属性値を二重引用符で囲む必要があります。

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

また、window.openの最初のパラメーターも引用符で囲む必要があることに注意する必要があります。

3
Sourabh

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

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

このjqueryはうまく機能すると思います。以下のコードを確認してください。

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

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

このコードは私に最適です。

0
Abhi