Cara membuka jendela baru pada formulir kirim

127

Saya memiliki formulir kirim dan ingin membuka jendela baru ketika pengguna mengirimkan formulir sehingga saya dapat melacaknya di analytics.

Ini kode yang saya gunakan:

<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>
Michael Currie
sumber

Jawaban:

272

Tidak perlu Javascript, Anda hanya perlu menambahkan target="_blank"atribut di tag formulir Anda.

<form target="_blank" action="http://example.com"
      method="post" id="mc-embedded-subscribe-form"
      name="mc-embedded-subscribe-form" class="validate"
>
Konstantinos
sumber
5
jika Anda menambahkan target = _blank, Anda tidak perlu acara onClick.
WhyNotHugo
5
Senang telah menemukan posting ini! Menambahkan target = "_ blank" ke tag formulir memecahkan masalah saya perlu membuka jendela baru!
kaitlynjanine
3
ini tidak persis menjawab pertanyaan OP, tetapi itu adalah jawaban yang lebih berguna dalam penggunaan umum target="_blank"daripada Javascript
Kip
2
target = "blank" berfungsi dengan baik. developer.mozilla.org/en-US/docs/HTML/Element/form
Eric
5
setidaknya pada IE 11, target = "_ blank" membuat tab baru di jendela browser saat ini alih-alih membuat jendela browser baru ..... IMHO, tab baru berbeda dari jendela browser baru
Marcelo Bezerra
33

Dalam aplikasi basis data berbasis web yang menggunakan jendela sembul untuk menampilkan hasil cetak data basis data, ini berfungsi cukup baik untuk kebutuhan kita (diuji di Chrome 48):

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

Caranya adalah dengan mencocokkan targetatribut pada <form>tag dengan argumen kedua dalam window.openpanggilan di onsubmithandler.

Awerealis
sumber
Ini memberikan kontrol ukuran jendela. Luar biasa.
Chalky
solusi terbaik di halaman ini, mengujinya dan berfungsi dengan sempurna.
Manny Ramirez
Ini adalah persis apa yang saya cari ketika membuat PDF ke jendela terpisah saat kirim.
jrob007
7

onclickmungkin bukan acara terbaik untuk melampirkan tindakan itu. Kapan saja seseorang mengklik di mana saja dalam formulir, itu akan membuka jendela.

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

Untuk efek yang mirip dengan targetatribut bentuk , Anda juga bisa menggunakan formtargetatribut input[type="submit]"atau button[type="submit"].

Dari MDN :

... atribut ini adalah nama atau kata kunci yang menunjukkan di mana harus menampilkan respons yang diterima setelah mengirimkan formulir. Ini adalah nama, atau kata kunci untuk, konteks penelusuran (misalnya, tab, jendela, atau bingkai sebaris). Jika atribut ini ditentukan, itu menimpa atribut target pemilik bentuk elemen. Kata kunci berikut memiliki arti khusus:

  • _self: Muat respons ke dalam konteks penelusuran yang sama dengan yang saat ini. Nilai ini adalah default jika atribut tidak ditentukan.
  • _blank: Muat respons ke dalam konteks penelusuran tanpa nama yang baru.
  • _parent: Memuat respons ke dalam konteks penelusuran induk dari yang saat ini. Jika tidak ada orang tua, opsi ini berlaku seperti _self.
  • _top: Memuat respons ke dalam konteks penelusuran tingkat atas (yaitu, konteks penelusuran yang merupakan leluhur dari yang saat ini, dan tidak memiliki induk). Jika tidak ada orang tua, opsi ini berlaku seperti _self.
alxs
sumber
Sangat berguna ketika memiliki beberapa tombol kirim.
hrvoj3e
Sepertinya mereka menghapus konten itu dari halaman elemen input. Info serupa tentang atribut formtarget dapat ditemukan di halaman elemen tombol: developer.mozilla.org/en-US/docs/Web/HTML/Element/…
peater
3

Kode yang Anda berikan, perlu diperbaiki. Dalam bentuk tag Anda harus menyertakan nilai atribut onClick dalam tanda kutip ganda:

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

Anda juga perlu berhati-hati agar parameter pertama window.openjuga harus dilampirkan menggunakan tanda kutip.

Sourabh
sumber
2

Saya biasanya menggunakan snippet jQuery kecil secara global untuk membuka tautan eksternal di tab / jendela baru. Saya telah menambahkan pemilih untuk formulir untuk situs saya sendiri dan sejauh ini berfungsi dengan baik:

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

Saya yakin jquery ini berfungsi baik untuk Anda, silakan periksa kode di bawah ini.

ini akan membuat aksi kirim Anda berfungsi dan membuka tautan di tab baru apakah Anda ingin membuka kembali url tindakan atau tautan baru

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

Kode ini berfungsi sempurna untuk saya ..

Abhi
sumber
-4

window.open tidak berfungsi di semua browser, Google dan Anda akan menemukan cara mendeteksi jenis dialog yang benar.

Juga, pindahkan panggilan onclick ke tombol input untuk itu hanya api ketika pengguna mengirimkan.

cjk
sumber
1
Klik tombol input salah. Kemudian, jika pengguna mengkliknya, tetapi menjauh sebelum melepaskan, itu masih akan menyala.
Matthew Flaschen
-12

Saya menemukan solusi untuk ini juga. Halaman ini membantu saya hari ini, jadi saya memposting ulang di sini juga.

/** 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" ;

Kode di atas adalah kode untuk satu tombol. Anda menekan tombol dan itu akan menggambar ulang layar saat ini dari pembelian ke pra-persetujuan. Pada saat yang sama ia membuka jendela baru dan menyerahkan jendela baru itu ke PayPal.

pengguna2737761
sumber
5
OP telah mengatakan mereka baru mengenal kode - IMO memposting seluruh beban kode (mengerikan diformat) yang berkaitan dengan tombol Paypal tidak akan membantu mereka
Mike