POSTフォームを送信した後、結果を示す新しいウィンドウを開きます


149

フォーム送信のようなJavaScriptポストリクエストは、 JavaScriptのPOSTを介して作成したフォームを送信する方法を示しています。以下は私の変更したコードです。

var form = document.createElement("form");

form.setAttribute("method", "post");
form.setAttribute("action", "test.jsp");

var hiddenField = document.createElement("input");  

hiddenField.setAttribute("name", "id");
hiddenField.setAttribute("value", "bob");
form.appendChild(hiddenField);
document.body.appendChild(form); // Not entirely sure if this is necessary          
form.submit();

結果を新しいウィンドウで開きます。私は現在、次のようなものを使用して新しいウィンドウでページを開いています。

onclick = window.open(test.html, '', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');

2
注意document.body.appendChild(form) され、必要に応じて参照stackoverflow.com/q/42053775/58241
benrwb

回答:


220

追加

<form target="_blank" ...></form>

または

form.setAttribute("target", "_blank");

あなたのフォームの定義に。


属性idをフォーム要素に追加することを忘れないでください。そうしないと、ポップアップブロッカーがオフになっていても、Safariブラウザでは機能しません。<form id = "popupForm" target = "_ blank" ...> </ form>
Naren

131

あなたの質問のようにJavascriptからフォームを作成して送信したい場合で、カスタム機能を備えたポップアップウィンドウを作成したい場合は、この解決策を提案します(追加した行の上にコメントを付けます):

var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "test.jsp");

// setting form target to a window named 'formresult'
form.setAttribute("target", "formresult");

var hiddenField = document.createElement("input");              
hiddenField.setAttribute("name", "id");
hiddenField.setAttribute("value", "bob");
form.appendChild(hiddenField);
document.body.appendChild(form);

// creating the 'formresult' window with custom features prior to submitting the form
window.open('test.html', 'formresult', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');

form.submit();

18
+1受け入れられた回答よりも優れています。これは、OPが望んだオプションを使用して結果をポップアップに実際に表示するためです。
ニコール

IEでは機能しません。指定した属性で新しいウィンドウを作成し、結果を別の新しいウィンドウにロードして、前のウィンドウを空のままにします。
mjaggard 2011年

1
@mjaggard:何を追加しましたか?この回答の編集を提案する価値があるかもしれません。
マイケルマイヤーズ

3
@SaurabhNanda私が知る限り、要素のtarget属性はHTML 4.01 Transitionalでは廃止されておらず、どうやらHTML 5に留まることです。form
Marko Dumic 2012年

1
警告:これを機能させるには、フォームをドキュメントの本文に添付する必要がありました(FF 17)。フラグメントを作成し、それを合計しようとしても機能しませんでした。
voidstate '28年

8
var urlAction = 'whatever.php';
var data = {param1:'value1'};

var $form = $('<form target="_blank" method="POST" action="' + urlAction + '">');
$.each(data, function(k,v){
    $form.append('<input type="hidden" name="' + k + '" value="' + v + '">');
});
$form.submit();

何かが足りないのですか、それとも.appendフォームを閉じるタグが必要ですか?
theJollySin

フォームを追加した後、これは不完全だと思います。ベストプラクティスとして削除する必要があります。
ncubica

@theJollySin:タグでjQueryを呼び出すと、実際のDOM要素になり、DOMに挿入すると閉じられます。
Janus Troelsen 2013

1
私は行方不明appendTo(「体」)があると思うし、最後の行はように記述する必要があります$form.appendTo('body').submit();
PBrockmann

1

私はこの基本的な方法を知っています:

1)

<input type=”image src=”submit.png”> (in any place)

2)

<form name=”print”>
<input type=”hidden name=”a value=”<?= $a ?>”>
<input type=”hidden name=”b value=”<?= $b ?>”>
<input type=”hidden name=”c value=”<?= $c ?>”>
</form>

3)

<script>
$(‘#submit’).click(function(){
    open(”,”results”);
    with(document.print)
    {
        method = POST”;
        action = results.php”;
        target = results”;
        submit();
    }
});
</script>

動作します!


3
それはjqueryで!彼は純粋なJSを求めています
Aviatrix 2010年

1

フローウィンドウの最も簡単な作業ソリューション(Chromeでテスト済み):

<form action='...' method=post target="result" onsubmit="window.open('','result','width=800,height=400');">
    <input name="..">
    ....
</form>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.