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

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

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

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

Answer 3

Код, который вы указали, нуждается в исправлении. В виде тега вы должны приложенные к нему OnClick значения атрибута в двойных кавычках:

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

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

Answer 4

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 5

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

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

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

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

Answer 7

В веб-приложения базы данных, которая использует всплывающее окно для распечатки данных базы данных, это работало достаточно хорошо для наших потребностей (проверено в Chrome 48) ...

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

хитрость заключается в том, чтобы соответствовать атрибуту на <form> тег target со вторым аргументом в window.open вызова в onsubmit обработчика.

Answer 8

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

От MDN:

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

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