วิธีเปิดหน้าต่างใหม่ในการส่งแบบฟอร์ม

ฉันมีแบบฟอร์มส่งและต้องการให้เปิดหน้าต่างใหม่เมื่อผู้ใช้ส่งแบบฟอร์มเพื่อให้ฉันสามารถติดตามการวิเคราะห์ได้

นี่คือรหัสที่ฉันใช้:

<form action="http://URL at mailchimp subscriber URL.com" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" onclick=window.open(google.html,'','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');>
    <label for="name">Your Name</label><input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
    <br/>
    <br/>
    <label for="email">Your Email </label><input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL">
    <br/>
    <br/>
    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="submit">
</form>
</div>

ไม่จำเป็นต้องใช้ Javascript คุณเพียงแค่ต้องเพิ่มtarget="_blank"แอตทริบิวต์ในแท็กฟอร์มของคุณ

<form target="_blank" action="http://example.com"
      method="post" id="mc-embedded-subscribe-form"
      name="mc-embedded-subscribe-form" class="validate"
>

ในแอปพลิเคชันฐานข้อมูลบนเว็บที่ใช้หน้าต่างป๊อปอัปเพื่อแสดงการพิมพ์ข้อมูลฐานข้อมูลสิ่งนี้ทำงานได้ดีเพียงพอสำหรับความต้องการของเรา (ทดสอบใน Chrome 48):

<form method="post" 
      target="print_popup" 
      action="/myFormProcessorInNewWindow.aspx"
      onsubmit="window.open('about:blank','print_popup','width=1000,height=800');">

เคล็ดลับคือการจับคู่targetแอตทริบิวต์บน<form>แท็กกับอาร์กิวเมนต์ที่สองในการwindow.openเรียกในonsubmitตัวจัดการ

onclickอาจไม่ใช่เหตุการณ์ที่ดีที่สุดในการแนบการกระทำนั้นไป ทุกครั้งที่คลิกที่ใดก็ได้ในแบบฟอร์มระบบจะเปิดหน้าต่าง

<form action="..." ...
    onsubmit="window.open('google.html', '_blank', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');return true;">

สำหรับผลคล้ายกับรูปแบบของtargetแอตทริบิวต์คุณยังสามารถใช้formtargetแอตทริบิวต์หรือinput[type="submit]"button[type="submit"]

จากMDN :

... แอตทริบิวต์นี้เป็นชื่อหรือคีย์เวิร์ดที่ระบุตำแหน่งที่จะแสดงการตอบกลับที่ได้รับหลังจากส่งแบบฟอร์ม นี่คือชื่อหรือคีย์เวิร์ดสำหรับบริบทการสืบค้น (เช่นแท็บหน้าต่างหรืออินไลน์เฟรม) หากระบุแอตทริบิวต์นี้จะแทนที่แอตทริบิวต์เป้าหมายของเจ้าของฟอร์มขององค์ประกอบ คำหลักต่อไปนี้มีความหมายพิเศษ:

• _self: โหลดคำตอบลงในบริบทการสืบค้นเดียวกับบริบทปัจจุบัน ค่านี้เป็นค่าเริ่มต้นหากไม่ได้ระบุแอตทริบิวต์
• _blank: โหลดคำตอบลงในบริบทการสืบค้นใหม่ที่ไม่มีชื่อ
• _parent: โหลดการตอบกลับลงในบริบทการเรียกดูหลักของบริบทปัจจุบัน หากไม่มีผู้ปกครองตัวเลือกนี้จะทำงานในลักษณะเดียวกับ _self
• _top: โหลดการตอบกลับลงในบริบทการสืบค้นระดับบนสุด (นั่นคือบริบทการสืบค้นที่เป็นบรรพบุรุษของบริบทปัจจุบันและไม่มีพาเรนต์) หากไม่มีผู้ปกครองตัวเลือกนี้จะทำงานในลักษณะเดียวกับ _self

รหัสที่คุณให้มาจำเป็นต้องได้รับการแก้ไข ในแท็กแบบฟอร์มคุณต้องใส่ค่าแอตทริบิวต์ onClick ในเครื่องหมายคำพูดคู่:

"window.open('google.htm','','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');"

คุณต้องดูแลด้วยว่าพารามิเตอร์แรกของwindow.openควรถูกใส่ไว้ด้วยเครื่องหมายคำพูด

โดยทั่วไปฉันจะใช้ข้อมูลโค้ด jQuery ขนาดเล็กทั่วโลกเพื่อเปิดลิงก์ภายนอกในแท็บ / หน้าต่างใหม่ ฉันได้เพิ่มตัวเลือกสำหรับแบบฟอร์มสำหรับไซต์ของฉันเองแล้วและยังใช้งานได้ดี:

// URL target
    $('a[href*="//"]:not([href*="'+ location.hostname +'"]),form[action*="//"]:not([href*="'+ location.hostname +'"]').attr('target','_blank');

ฉันเชื่อว่า jquery นี้ใช้ได้ผลดีสำหรับคุณโปรดตรวจสอบรหัสด้านล่าง

สิ่งนี้จะทำให้การดำเนินการส่งของคุณใช้งานได้และเปิดลิงก์ในแท็บใหม่ไม่ว่าคุณจะต้องการเปิด URL การดำเนินการอีกครั้งหรือลิงก์ใหม่

jQuery('form').on('submit',function(e){
setTimeout(function () { window.open('https://www.google.com','_blank');}, 1000);});})

รหัสนี้ใช้ได้กับฉันอย่างสมบูรณ์แบบ ..

window.open ใช้ไม่ได้กับทุกเบราว์เซอร์ Google และคุณจะพบวิธีตรวจจับประเภทข้อความโต้ตอบที่ถูกต้อง

นอกจากนี้ให้ย้ายการโทรแบบคลิกไปที่ปุ่มอินพุตเพื่อให้เริ่มทำงานเมื่อผู้ใช้ส่งเท่านั้น

ฉันพบวิธีแก้ปัญหานี้ด้วย หน้านี้ช่วยฉันในวันนี้ดังนั้นฉันจึงโพสต์ใหม่ที่นี่ด้วย

/** This is the script that will redraw current screen and submit to paypal. */
echo '<script>'."\n" ;
echo 'function serverNotifySelected()'."\n" ;
echo '{'."\n" ;
echo '    window.open(\'\', \'PayPalPayment\');'."\n" ;
echo '    document.forms[\'paypal_form\'].submit();'."\n" ;
echo '    document.forms[\'server_responder\'].submit();'."\n" ;
echo '}'."\n" ;
echo '</script>'."\n" ;

/** This form will be opened in a new window called PayPalPayment. */
echo '<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" name="paypal_form" method="post" target="PayPalPayment">'."\n" ;
echo '<input type="hidden" name="cmd" value="_s-xclick">'."\n" ;
echo '<input type="hidden" name="custom" value="'.$transaction_start.'">'."\n" ;
echo '<input type="hidden" name="hosted_button_id" value="'.$single_product->hosted_button_id.'">'."\n" ;
echo '<table>'."\n" ;
echo '    <tr>'."\n";
echo '        <td><input type="hidden" name="'.$single_product->hide_name_a.'" value="'.$single_product->hide_value_a.'">Local</td>'."\n" ;
echo '    </tr>'."\n" ;
echo '    <tr>'."\n" ;
echo '        <td>'."\n" ;
echo '        <input type="hidden" name="'.$single_product->hide_name_b.'" value="'.$single_product->hide_value_b.'" />'.$single_product->short_desc.' $'.$adj_price.' USD'."\n" ;
                // <select name="os0">
                //     <option value="1 Day">1 Day $1.55 USD</option>
                //     <option value="All Day">All Day $7.50 USD</option>
                //     <option value="3 Day">3 Day $23.00 USD</option>
                //     <option value="31 Day">31 Day $107.00 USD</option>
                // </select>
echo '        </td>'."\n" ;
echo '    </tr>'."\n" ;
echo '</table>'."\n" ;
echo '<input type="hidden" name="currency_code" value="USD">'."\n" ;
echo '</form>'."\n" ;

/** This form will redraw the current page for approval. */
echo '<form action="ProductApprove.php" name="server_responder" method="post" target="_top">'."\n" ;
echo '<input type="hidden" name="trans" value="'.$transaction_start.'">'."\n" ;
echo '<input type="hidden" name="prod_id" value="'.$this->product_id.'">'."\n" ;
echo '</form>'."\n" ;

/** No form here just an input and a button.  onClick will handle all the forms */
echo '<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" alt="PayPal - The safer, easier way to pay online!" onclick="serverNotifySelected()">'."\n" ;
echo '<img alt="" border="0" src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">'."\n" ;

รหัสด้านบนเป็นรหัสสำหรับปุ่มเดียว คุณกดปุ่มและมันจะวาดหน้าจอปัจจุบันใหม่ตั้งแต่การซื้อจนถึงการอนุมัติล่วงหน้า ในขณะเดียวกันก็เปิดหน้าต่างใหม่และส่งหน้าต่างใหม่ไปยัง PayPal