Después de enviar un formulario POST, abra una nueva ventana que muestre el resultado

149

La solicitud de publicación de JavaScript, como un envío de formulario, le muestra cómo enviar un formulario que crea a través de POST en JavaScript. A continuación se muestra mi código modificado.

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

Lo que me gustaría hacer es abrir los resultados en una nueva ventana. Actualmente estoy usando algo como esto para abrir una página en una nueva ventana:

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

javascript html post

— usuario4642212
fuente

2

Tenga en cuenta que document.body.appendChild(form) es necesario, consulte stackoverflow.com/q/42053775/58241

— benrwb

220

Añadir

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

o

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

a la definición de su formulario.

— liggett78
fuente

Recuerde agregar la identificación del atributo al elemento de formulario; de lo contrario, esto no funciona en el navegador Safari aunque el bloqueador de ventanas emergentes esté desactivado. <form id = "popupForm" target = "_ blank" ...> </form>

— Naren

131

Si desea crear y enviar su formulario desde Javascript como está en su pregunta y desea crear una ventana emergente con características personalizadas, propongo esta solución (pongo comentarios sobre las líneas que agregué):

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
fuente

18

+1 Mejor que la respuesta aceptada, ya que en realidad pone el resultado en la ventana emergente con las opciones que el OP quería.

— Nicole

No me funciona en IE: crea una nueva ventana con los atributos especificados y luego carga los resultados en otra nueva ventana, dejando vacía la ventana anterior.

— mjaggard

1

@mjaggard: ¿Qué agregaste? Puede valer la pena sugerir una edición para esta respuesta.

— Michael Myers

3

@SaurabhNanda Por lo que puedo decir, el targetatributo en el formelemento no está en desuso en HTML 4.01 Transitional y aparentemente debe permanecer en HTML 5 .

— Marko Dumic

1

Una advertencia: tuve que adjuntar mi formulario al cuerpo del documento antes de que esto funcionara (en FF 17). Crear un fragmento e intentar sumbitarlo no funcionó.

— nulo

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
fuente

¿Me estoy perdiendo algo o todavía necesita .appendcerrar la etiqueta de formulario?

— theJollySin

Creo que esto está incompleto después de agregar el formulario que debe eliminar para una mejor práctica.

— ncubica

@theJollySin: Al llamar a jQuery en la etiqueta, se convertirá en un elemento DOM real y se cerrará cuando se inserte en el DOM.

— Janus Troelsen

1

Creo que falta un appendTo ('cuerpo') y la última línea debe escribirse como:$form.appendTo('body').submit();

— PBrockmann

1

Conozco este método básico:

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>

¡Trabajos!

— Edu Carrega
fuente

3

eso es con jquery! él pide JS puro

— Aviatrix

1

La solución de trabajo más simple para la ventana de flujo (probada en Chrome):

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

— Grigory Kislin
fuente