Após enviar um formulário POST, abra uma nova janela mostrando o resultado

149

A solicitação de postagem de JavaScript como um envio de formulário mostra como enviar um formulário que você criou via POST em JavaScript. Abaixo está o meu 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();

O que eu gostaria de fazer é abrir os resultados em uma nova janela. Atualmente, estou usando algo parecido com isto para abrir uma página em uma nova janela:

onclick = window.open(test.html, '', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');
user4642212
fonte
2
Observe que document.body.appendChild(form) é necessário, consulte stackoverflow.com/q/42053775/58241
benrwb

Respostas:

220

Adicionar

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

ou

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

à definição do seu formulário.

liggett78
fonte
Lembre-se de adicionar o ID do atributo ao elemento do formulário, caso contrário, isso não funcionará no navegador Safari, mesmo que o bloqueador de pop-ups esteja desativado. <form id = "popupForm" target = "_ blank" ...> </form>
Naren
131

Se você deseja criar e enviar seu formulário a partir de Javascript, como está na sua pergunta, e deseja criar uma janela pop-up com recursos personalizados, proponho esta solução (coloquei comentários acima das linhas adicionadas):

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 Melhor que a resposta aceita, pois na verdade coloca o resultado no pop-up com as opções desejadas pelo OP.
Nicole Nicole
Não funciona para mim no IE - ele cria uma nova janela com os atributos especificados e carrega os resultados em outra nova janela, deixando a janela anterior vazia.
Mjaggard
1
@mjaggard: O que você adicionou? Pode valer a pena sugerir uma edição para esta resposta.
Michael Myers
3
@SaurabhNanda Até onde eu sei, o targetatributo on formelement não é preterido no HTML 4.01 Transitional e, aparentemente, deve permanecer no HTML 5 .
Marko Dumic
1
Um aviso: eu tive que anexar meu formulário ao corpo do documento antes que isso funcionasse (em FF 17). Criar um fragmento e tentar sublinhá-lo não funcionou.
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
Estou faltando alguma coisa ou você ainda precisa .appendfechar a tag do formulário?
theJollySin
Acho que isso está incompleto depois de anexar o formulário que você deve removê-lo para obter uma prática recomendada.
Ncubica
@theJollySin: Ao chamar o jQuery na tag, ele se tornará um elemento DOM real e será fechado quando inserido no DOM.
Janus Troelsen
1
Eu acho que há uma falta appendTo ( 'body') ea última linha deve ser escrita como:$form.appendTo('body').submit();
PBrockmann
1

Eu conheço 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>

Trabalho!

Edu Carrega
fonte
3
isso é com jquery! ele pede JS puro
Aviatrix
1

Solução de trabalho mais simples para a janela de fluxo (testada no Chrome):

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