Öffnen Sie nach dem Absenden eines POST-Formulars ein neues Fenster mit dem Ergebnis


149

Eine JavaScript-Post-Anfrage wie das Senden eines Formulars zeigt Ihnen, wie Sie ein Formular senden , das Sie per POST in JavaScript erstellen. Unten ist mein geänderter Code.

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();

Ich möchte die Ergebnisse in einem neuen Fenster öffnen. Ich verwende derzeit so etwas, um eine Seite in einem neuen Fenster zu öffnen:

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

2
Beachten Sie, dass document.body.appendChild(form) ist notwendig, siehe stackoverflow.com/q/42053775/58241
benrwb

Antworten:


220

Hinzufügen

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

oder

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

zur Definition Ihres Formulars.


Denken Sie daran, die Attribut-ID zum Formularelement hinzuzufügen, da dies sonst im Safari-Browser nicht funktioniert, obwohl der Popup-Blocker deaktiviert ist. <form id = "popupForm" target = "_ blank" ...> </ form>
Naren

131

Wenn Sie Ihr Formular wie in Ihrer Frage beschrieben aus Javascript erstellen und senden möchten und ein Popup-Fenster mit benutzerdefinierten Funktionen erstellen möchten, schlage ich diese Lösung vor (ich setze Kommentare über die von mir hinzugefügten Zeilen):

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 Besser als die akzeptierte Antwort, da das Ergebnis tatsächlich mit den vom OP gewünschten Optionen in das Popup eingefügt wird.
Nicole

Funktioniert bei mir im IE nicht - es erstellt ein neues Fenster mit den angegebenen Attributen und lädt dann die Ergebnisse in ein anderes neues Fenster, wobei das vorherige Fenster leer bleibt.
Mjaggard

1
@mjaggard: Was hast du hinzugefügt? Es könnte sich lohnen, diese Antwort zu bearbeiten.
Michael Myers

3
@SaurabhNanda Soweit ich das beurteilen kann, ist das targetAttribut für das formElement in HTML 4.01 Transitional nicht veraltet und soll anscheinend in HTML 5 bleiben .
Marko Dumic

1
Eine Warnung: Ich musste mein Formular an den Dokumententext anhängen, bevor dies funktionieren würde (in FF 17). Es hat nicht funktioniert, ein Fragment zu erstellen und zu versuchen, es zu zerstören.
Voidstate

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();

Vermisse ich etwas oder müssen Sie .appenddas Formular-Tag noch schließen?
TheJollySin

Ich denke, dies ist unvollständig, nachdem Sie das Formular angehängt haben, das Sie für eine bewährte Methode entfernen sollten.
Ncubica

@theJollySin: Wenn Sie jQuery für das Tag aufrufen, wird es zu einem echten DOM-Element und wird beim Einfügen in das DOM geschlossen.
Janus Troelsen

1
Ich denke, es fehlt ein Anhang ('Körper') und die letzte Zeile sollte wie $form.appendTo('body').submit();
folgt

1

Ich kenne diese grundlegende Methode:

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>

Funktioniert!


3
das ist mit jquery! er bittet um reine JS
Aviatrix

1

Einfachste Arbeitslösung für Flow Window (bei Chrome getestet):

<form action='...' method=post target="result" onsubmit="window.open('','result','width=800,height=400');">
    <input name="..">
    ....
</form>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.