Bir POST formu gönderdikten sonra sonucu gösteren yeni bir pencere açın

149

Form gönderme gibi JavaScript yayın isteği , JavaScript'te POST aracılığıyla oluşturduğunuz bir formu nasıl göndereceğinizi gösterir. Aşağıda değiştirilmiş kodum.

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

Yapmak istediğim sonuçları yeni bir pencerede açmak. Şu anda yeni bir pencerede bir sayfa açmak için böyle bir şey kullanıyorum:

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

javascript html post

— user4642212
kaynak

2

Not document.body.appendChild(form) olan gerekli bkz stackoverflow.com/q/42053775/58241

— benrwb

220

Ekle

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

veya

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

formunuzun tanımına.

— liggett78
kaynak

Özellik öğesine form öğesine eklemeyi unutmayın, aksi halde açılır pencere engelleyicisi kapalı olsa bile bu Safari tarayıcısında çalışmaz. <form id = "popupForm" target = "_ blank" ...> </form>

— Naren

131

Sorunuzu olduğu gibi formunuzu Javascript'ten oluşturmak ve göndermek istiyorsanız ve özel özelliklere sahip açılır pencere oluşturmak istiyorsanız bu çözümü öneriyorum (eklediğim satırların üzerine yorumlar koydum):

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
kaynak

18

+1 OP'nin istediği seçeneklerle sonucu gerçekten pop-up'a yerleştirdiği için kabul edilen cevaptan daha iyi.

— Nicole

IE'de benim için çalışmıyor - belirtilen özniteliklere sahip yeni bir pencere oluşturur ve sonuçları başka bir yeni pencereye yükler, önceki pencereyi boş bırakır.

— 11:48

1

@mjaggard: Ne ekledin? Bu yanıta bir düzenleme önermek faydalı olabilir.

— Michael Myers

3

Söyleyebileceğim @SaurabhNanda Bildiğim kadarıyla, targetüzerinde niteliği formelemanı olup kaldırılmış değil de HTML 4.01 Transitional ve görünüşe içinde kalmaktır HTML 5 .

— Marko Dumic

1

Uyarı: Bu işe yaramadan önce formumu belge gövdesine iliştirmek zorunda kaldım (FF 17'de). Bir parça yaratmak ve onu yuvarlamaya çalışmak işe yaramadı.

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

Bir şey mi kaçırıyorum yoksa .appendyakın form etiketine hala ihtiyacınız var mı?

— theJollySin

En iyi uygulama için formu eklemenizden sonra bu eksik olduğunu düşünüyorum.

— ncubica

@theJollySin: Etikette jQuery çağrıldığında, gerçek bir DOM öğesine dönüşür ve DOM'a eklendiğinde kapatılır.

— Janus Troelsen

1

Bence eksik bir appendTo ('body') var ve son satır şu şekilde yazılmalıdır:$form.appendTo('body').submit();

— PBrockmann

1

Bu temel yöntemi biliyorum:

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>

İşler!

— Edu Carrega
kaynak

3

jquery ile bu! saf JS istiyor

— Aviatrix

1

Akış penceresi için en basit çalışma çözümü (Chrome'da test edilmiştir):

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

— Grigory Kislin
kaynak