Po przesłaniu formularza POST otwórz nowe okno pokazujące wynik

149

Żądanie postu JavaScript, takie jak przesyłanie formularza, pokazuje, jak przesłać formularz utworzony przez POST w JavaScript. Poniżej znajduje się mój zmodyfikowany kod.

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

To, co chciałbym zrobić, to otworzyć wyniki w nowym oknie. Obecnie używam czegoś takiego do otwierania strony w nowym oknie:

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

javascript html post

— user4642212
źródło

2

Zauważ, że document.body.appendChild(form) jest to konieczne, zobacz stackoverflow.com/q/42053775/58241

— benrwb

220

Dodaj

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

lub

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

do definicji twojego formularza.

— liggett78
źródło

Pamiętaj, aby dodać identyfikator atrybutu do elementu formularza, w przeciwnym razie nie będzie to działać w przeglądarce Safari, nawet jeśli blokada wyskakujących okienek jest wyłączona. <form id = "popupForm" target = "_ blank" ...> </form>

— Naren,

131

Jeśli chcesz stworzyć i przesłać swój formularz z Javascript, tak jak w pytaniu i chcesz stworzyć wyskakujące okienko z niestandardowymi funkcjami, proponuję takie rozwiązanie (komentarze umieszczam nad dodanymi liniami):

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
źródło

18

+1 Lepsza niż zaakceptowana odpowiedź, ponieważ faktycznie umieszcza wynik w wyskakującym okienku z opcjami, których chciał PO.

— Nicole

Nie działa dla mnie w IE - tworzy nowe okno z określonymi atrybutami, a następnie ładuje wyniki w innym nowym oknie, pozostawiając poprzednie okno puste.

— mjaggard

1

@mjaggard: Co dodałeś? Warto zasugerować zmianę tej odpowiedzi.

— Michael Myers

3

@SaurabhNanda O ile wiem, targetatrybut formelementu nie jest przestarzały w HTML 4.01 Transitional i najwyraźniej ma pozostać w HTML 5 .

— Marko Dumic

1

Ostrzeżenie: musiałem dołączyć swój formularz do treści dokumentu, zanim to zadziałało (w FF 17). Tworzenie fragmentu i próba przesłania go nie działało.

— 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
źródło

Czy czegoś mi brakuje, czy nadal potrzebujesz .appendtagu formularza zamykającego?

— theJollySin

Myślę, że jest to niekompletne po dołączeniu formularza, należy go usunąć ze względu na najlepszą praktykę.

— ncubica

@theJollySin: Wywołując jQuery na tagu, zmieni się on w prawdziwy element DOM i zostanie zamknięty po wstawieniu do DOM.

— Janus Troelsen

1

Myślę, że brakuje appendTo ('body'), a ostatnia linia powinna być zapisana jako:$form.appendTo('body').submit();

— PBrockmann

1

Znam tę podstawową metodę:

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>

Pracuje!

— Edu Carrega
źródło

3

to jest z jQuery! prosi o czysty JS

— Aviatrix

1

Najprostsze działające rozwiązanie dla okna przepływu (testowane w Chrome):

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

— Grigorij Kislin
źródło