หลังจากส่งแบบฟอร์ม POST ให้เปิดหน้าต่างใหม่เพื่อแสดงผลลัพธ์


149

คำขอโพสต์ JavaScript เช่นส่งแบบฟอร์มแสดงวิธีส่งแบบฟอร์มที่คุณสร้างผ่าน POST ใน JavaScript ด้านล่างคือรหัสที่แก้ไขแล้วของฉัน

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

สิ่งที่ฉันต้องการจะทำคือเปิดผลลัพธ์ในหน้าต่างใหม่ ฉันกำลังใช้สิ่งนี้เพื่อเปิดหน้าในหน้าต่างใหม่:

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

2
ทราบว่าdocument.body.appendChild(form) เป็นสิ่งที่จำเป็นดูstackoverflow.com/q/42053775/58241
benrwb

คำตอบ:


220

เพิ่ม

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

หรือ

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

ตามคำจำกัดความของแบบฟอร์มของคุณ


อย่าลืมเพิ่มรหัสคุณลักษณะในองค์ประกอบของฟอร์มมิฉะนั้นจะไม่สามารถใช้งานได้ในเบราว์เซอร์ Safari แม้ว่าตัวปิดป๊อปอัปจะปิด <form id = "popupForm" target = "_ blank" ... > </form>
Naren

131

หากคุณต้องการสร้างและส่งแบบฟอร์มของคุณจาก Javascript ตามที่เป็นอยู่ในคำถามของคุณและคุณต้องการสร้างหน้าต่างป๊อปอัพที่มีคุณสมบัติที่กำหนดเองฉันเสนอวิธีแก้ปัญหานี้ (ฉันใส่ความคิดเห็นด้านบนบรรทัดที่ฉันเพิ่ม):

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

18
+1 ดีกว่าคำตอบที่ยอมรับเพราะจริง ๆ แล้วมันทำให้เกิดผลลัพธ์ในป๊อปอัพด้วยตัวเลือกที่ต้องการ OP
นิโคล

ใช้งานไม่ได้กับฉันใน IE - สร้างหน้าต่างใหม่พร้อมแอตทริบิวต์ที่ระบุจากนั้นโหลดผลลัพธ์ในหน้าต่างใหม่อีกอันทำให้หน้าต่างก่อนหน้าว่างเปล่า
mjaggard

1
@mjaggard: คุณเพิ่มอะไรลงไป มันอาจจะคุ้มค่าที่จะแนะนำการแก้ไขคำตอบนี้
Michael Myers

3
@SaurabhNanda เท่าที่ผมสามารถบอกtargetแอตทริบิวต์ในformองค์ประกอบไม่เลิกในHTML 4.01 Transitionalและเห็นได้ชัดคือการเข้าพักในHTML 5
Marko Dumic

1
คำเตือน: ฉันต้องแนบแบบฟอร์มของฉันไปที่เนื้อความเอกสารก่อนที่สิ่งนี้จะใช้ได้ การสร้างชิ้นส่วนและพยายามที่จะพูดไม่ได้ผล
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();

ฉันทำบางสิ่งขาดหายไปหรือคุณยังต้องการ.appendแท็กปิด
theJollySin

ฉันคิดว่านี่ไม่สมบูรณ์หลังจากผนวกฟอร์มที่คุณควรลบออกเพื่อการปฏิบัติที่ดีที่สุด
ncubica

@theJollySin: โดยการเรียก jQuery บนแท็กมันจะกลายเป็นองค์ประกอบ DOM จริงและจะถูกปิดเมื่อแทรกเข้าไปใน DOM
Janus Troelsen

1
ฉันคิดว่ามีภาคผนวกที่ขาดหายไป ('ร่างกาย') และบรรทัดสุดท้ายควรเขียนเป็น:$form.appendTo('body').submit();
PBrockmann

1

ฉันรู้วิธีการพื้นฐานนี้:

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>

Works!


3
นั่นด้วย jquery! เขาขอให้บริสุทธิ์ JS
Aviatrix

1

วิธีแก้ปัญหาการทำงานที่ง่ายที่สุดสำหรับ flow window (ทดสอบที่ Chrome):

<form action='...' method=post target="result" onsubmit="window.open('','result','width=800,height=400');">
    <input name="..">
    ....
</form>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.