Как открыть новое окно в форме отправки

Question

У меня есть форма для отправки и я хочу, чтобы она открывала новое окно, когда пользователи отправляют форму, чтобы я мог отслеживать ее в аналитике.

Вот код, который я использую:

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

Answer 1

Javascript не нужен, вам просто нужно добавить атрибут target="_blank" в тег формы.

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

Answer 2

В веб-приложении базы данных, которое использует всплывающее окно для отображения распечаток данных базы данных, это работало достаточно хорошо для наших нужд (протестировано в 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.

Answer 3

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

Answer 4

Для эффекта, аналогичного атрибуту target формы, вы также можете использовать атрибут formtarget input[type="submit]" или button[type="submit"].

От MDN :

... этот атрибут является именем или ключевым словом, указывающим, где отображать ответ, полученный после отправки формы. Это имя или ключевое слово для контекста просмотра (например, вкладка, окно или встроенный фрейм). Если этот атрибут указан, он переопределяет целевой атрибут владельца формы элементов. Следующие ключевые слова имеют специальные значения:

• _self: Загрузить ответ в тот же контекст просмотра, что и текущий. Это значение является значением по умолчанию, если атрибут не указан.
• _blank: загрузка ответа в новый безымянный контекст просмотра.
• _parent: загрузить ответ в родительский контекст просмотра текущего. Если родителя нет, эта опция ведет себя так же, как _self.
• _top: загрузить ответ в контекст просмотра верхнего уровня (то есть контекст просмотра, который является предком текущего и не имеет родителя). Если родителя нет, эта опция работает так же, как _self.

Answer 5

Код, который вы дали, необходимо исправить. В теге формы необходимо заключить значение атрибута onClick в двойную кавычку:

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

Вам также необходимо убедиться, что первый параметр window.open также должен быть заключен в кавычки.

Answer 6

Обычно я использую небольшой фрагмент jQuery для открытия любых внешних ссылок в новой вкладке / окне. Я добавил селектор для формы для моего собственного сайта, и пока он отлично работает:

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

Answer 7

Я нашел решение и для этого. Эта страница помогла мне сегодня, поэтому я тоже публикую здесь.

/** 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.

Answer 8

window.open работает не во всех браузерах, Google, и вы найдете способ определения правильного типа диалога.

Кроме того, переместите вызов onclick на кнопку ввода, чтобы он срабатывал только при отправке пользователем.