Dopo aver inviato un modulo POST, aprire una nuova finestra che mostra il risultato

149

La richiesta di post di JavaScript come l'invio di un modulo mostra come inviare un modulo creato tramite POST in JavaScript. Di seguito è il mio codice modificato.

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

Quello che vorrei fare è aprire i risultati in una nuova finestra. Attualmente sto usando qualcosa del genere per aprire una pagina in una nuova finestra:

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

javascript html post

— user4642212
fonte

2

Si noti che document.body.appendChild(form) è necessario, vedi stackoverflow.com/q/42053775/58241

— benrwb

220

Inserisci

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

o

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

alla definizione del tuo modulo.

— liggett78
fonte

Ricorda di aggiungere l'id attributo all'elemento modulo, altrimenti non funziona nel browser Safari anche se il blocco popup è disattivato. <form id = "popupForm" target = "_ blank" ...> </form>

— Naren

131

Se vuoi creare e inviare il tuo modulo da Javascript come è nella tua domanda e vuoi creare una finestra popup con funzionalità personalizzate, propongo questa soluzione (metto commenti sopra le righe che ho aggiunto):

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

— Marko Dumic
fonte

18

+1 Meglio della risposta accettata, poiché in realtà inserisce il risultato nel popup con le opzioni desiderate dall'OP.

— Nicole

Non funziona per me su IE: crea una nuova finestra con gli attributi specificati e quindi carica i risultati in un'altra nuova finestra, lasciando vuota la finestra precedente.

— mjaggard,

1

@mjaggard: cosa hai aggiunto? Potrebbe valere la pena suggerire una modifica a questa risposta.

— Michael Myers

3

@SaurabhNanda Per quanto ne so, l' targetattributo on formelement non è deprecato in HTML 4.01 Transitional e apparentemente deve rimanere in HTML 5 .

— Marko Dumic,

1

Un avvertimento: ho dovuto allegare il mio modulo al corpo del documento prima che funzionasse (in FF 17). La creazione di un frammento e il tentativo di riassumere non ha funzionato.

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

— Luchaninov
fonte

Mi sto perdendo qualcosa o hai ancora bisogno .appenddel tag del modulo di chiusura?

— theJollySin,

Penso che questo sia incompleto dopo aver aggiunto il modulo che dovresti rimuoverlo per una migliore pratica.

— ncubica,

@theJollySin: chiamando jQuery sul tag, si trasformerà in un vero elemento DOM e verrebbe chiuso quando inserito nel DOM.

— Janus Troelsen,

1

Penso che manchi un'appendice To ('body') e l'ultima riga dovrebbe essere scritta come:$form.appendTo('body').submit();

— PBrockmann,

1

Conosco questo metodo di base:

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>

Lavori!

— Edu Carrega
fonte

3

questo è jquery! chiede JS puro

— Aviatrix il

1

La soluzione di lavoro più semplice per la finestra di flusso (testata su Chrome):

<form action='...' method=post target="result" onsubmit="window.open('','result','width=800,height=400');">
    <input name="..">
    ....
</form>

— Grigory Kislin
fonte