Setelah mengirimkan formulir POST, buka jendela baru yang menunjukkan hasilnya

149

Permintaan posting JavaScript seperti pengiriman formulir memperlihatkan kepada Anda cara mengirimkan formulir yang Anda buat melalui POST di JavaScript. Di bawah ini adalah kode saya yang dimodifikasi.

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

Yang ingin saya lakukan adalah membuka hasilnya di jendela baru. Saat ini saya menggunakan sesuatu seperti ini untuk membuka halaman di jendela baru:

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

javascript html post

— pengguna4642212
sumber

2

Perhatikan bahwa document.body.appendChild(form) adalah perlu, lihat stackoverflow.com/q/42053775/58241

— benrwb

220

Menambahkan

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

atau

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

ke definisi formulir Anda.

— liggett78
sumber

Ingatlah untuk menambahkan id atribut ke elemen formulir, jika tidak ini tidak berfungsi di browser Safari meskipun pemblokir popup dimatikan. <form id = "popupForm" target = "_ blank" ...> </form>

— Naren

131

Jika Anda ingin membuat dan mengirimkan formulir dari Javascript seperti pada pertanyaan Anda dan Anda ingin membuat jendela sembulan dengan fitur khusus, saya mengusulkan solusi ini (saya memberi komentar di atas garis yang saya tambahkan):

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
sumber

18

+1 Lebih baik daripada jawaban yang diterima, karena itu benar-benar menempatkan hasilnya di sembulan dengan opsi yang diinginkan OP.

— Nicole

Tidak berfungsi untuk saya di IE - ini membuat jendela baru dengan atribut yang ditentukan dan kemudian memuat hasilnya di jendela baru lain, membiarkan jendela sebelumnya kosong.

— mjaggard

1

@ mjaggard: Apa yang Anda tambahkan? Mungkin ada baiknya menyarankan edit untuk jawaban ini.

— Michael Myers

3

@SaurabhNanda Sejauh yang saya tahu, targetatribut pada formelemen tidak usang dalam HTML 4.01 Transisi dan tampaknya tetap di HTML 5 .

— Marko Dumic

1

Peringatan: Saya harus melampirkan formulir saya ke badan dokumen sebelum ini berfungsi (dalam FF 17). Membuat sebuah fragmen dan mencoba untuk menghentikannya tidak berhasil.

— 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
sumber

Apakah saya melewatkan sesuatu, atau apakah Anda masih perlu .appendmenutup form tag?

— theJollySin

Saya pikir ini tidak lengkap setelah menambahkan formulir Anda harus menghapusnya untuk praktik terbaik.

— ncubica

@theJollySin: Dengan memanggil jQuery pada tag, itu akan berubah menjadi elemen DOM nyata dan akan ditutup ketika dimasukkan ke DOM.

— Janus Troelsen

1

Saya pikir ada appendTo ('tubuh') yang hilang dan baris terakhir harus ditulis sebagai:$form.appendTo('body').submit();

— PBrockmann

1

Saya tahu metode dasar ini:

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>

Bekerja!

— Edu Carrega
sumber

3

itu dengan jquery! ia meminta JS murni

— Aviatrix

1

Solusi kerja paling sederhana untuk flow window (diuji di Chrome):

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

— Grigory Kislin
sumber