Como abrir uma nova janela no envio do formulário

127

Eu tenho um formulário de envio e quero que ele abra uma nova janela quando os usuários enviam o formulário para que eu possa rastreá-lo na análise.

Aqui está o código que estou usando:

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

Respostas:

272

Não há necessidade de Javascript, você apenas precisa adicionar um target="_blank"atributo na sua tag de formulário.

<form target="_blank" action="http://example.com"
      method="post" id="mc-embedded-subscribe-form"
      name="mc-embedded-subscribe-form" class="validate"
>
Konstantinos
fonte
5
se você adicionar o target = _blank, não precisará do evento onClick.
WhyNotHugo
5
Fico feliz em ter encontrado este post! A adição de target = "_ blank" à tag do formulário resolveu meu problema de precisar abrir uma nova janela!
kaitlynjanine
3
isso não responder exatamente a pergunta do OP, mas é a resposta mais útil em uso geral- target="_blank"vez de Javascript
Kip
2
target = "blank" funciona muito bem. developer.mozilla.org/pt-BR/docs/HTML/Element/form
Eric
5
pelo menos no IE 11, target = "_ blank" cria uma nova guia na janela atual do navegador em vez de criar uma nova janela do navegador ..... IMHO, uma nova guia é diferente de uma nova janela do navegador
Marcelo Bezerra
33

Em um aplicativo de banco de dados baseado na Web que usa uma janela pop-up para exibir impressões de dados do banco de dados, isso funcionou bem o suficiente para nossas necessidades (testado no Chrome 48):

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

O truque é combinar o targetatributo na <form>tag com o segundo argumento na window.openchamada no onsubmitmanipulador.

Awerealis
fonte
Isso fornece controle de tamanho da janela. Excelente.
Chalky
A melhor solução desta página, testou-a e funciona com perfeição.
Manny Ramirez
Era exatamente isso que eu procurava ao gerar um PDF em uma janela separada ao enviar.
precisa saber é
7

onclickpode não ser o melhor evento para anexar essa ação. Sempre que alguém clicar em qualquer lugar do formulário, ele abrirá a janela.

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

Para um efeito semelhante ao targetatributo do formulário , você também pode usar o formtargetatributo de input[type="submit]"ou button[type="submit"].

Do MDN :

... esse atributo é um nome ou palavra-chave indicando onde exibir a resposta recebida após o envio do formulário. Esse é um nome ou palavra-chave para um contexto de navegação (por exemplo, guia, janela ou quadro embutido). Se esse atributo for especificado, ele substituirá o atributo de destino do proprietário do formulário dos elementos. As seguintes palavras-chave têm significados especiais:

  • _self: carrega a resposta no mesmo contexto de navegação que o atual. Este valor é o padrão se o atributo não for especificado.
  • _blank: carrega a resposta em um novo contexto de navegação sem nome.
  • _parent: carrega a resposta no contexto de navegação pai do atual. Se não houver pai, essa opção se comportará da mesma maneira que _self.
  • _top: carrega a resposta no contexto de navegação de nível superior (ou seja, o contexto de navegação que é um ancestral do atual e não tem pai). Se não houver pai, essa opção se comportará da mesma maneira que _self.
alxs
fonte
Muito útil ao ter vários botões de envio.
Hrvoj3e
Parece que eles removeram esse conteúdo da página do elemento de entrada. Informações semelhantes sobre o atributo formtarget pode ser encontrado na pagina elemento botão: developer.mozilla.org/en-US/docs/Web/HTML/Element/...
peater
3

O código que você forneceu precisa ser corrigido. Na tag de formulário, você deve incluir o valor do atributo onClick entre aspas duplas:

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

Você também precisa tomar cuidado para que o primeiro parâmetro de window.opentambém esteja entre aspas.

Sourabh
fonte
2

Geralmente, uso um pequeno trecho de jQuery globalmente para abrir qualquer link externo em uma nova guia / janela. Adicionei o seletor de um formulário para o meu próprio site e funciona até o momento:

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

Eu acredito que este jquery funcione bem para você, por favor verifique um código abaixo.

isso fará com que sua ação de envio funcione e abra um link em uma nova guia, se você deseja abrir o URL de ação novamente ou um novo link

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

Este código funciona para mim perfeito ..

Abhi
fonte
-4

window.open não funciona em todos os navegadores, use o Google e você encontrará uma maneira de detectar o tipo de diálogo correto.

Além disso, mova a chamada onclick para o botão de entrada para que ela seja acionada apenas quando o usuário enviar.

cjk
fonte
1
onclick no botão de entrada está errado. Então, se o usuário clicar nele, mas se afastar antes de liberá-lo, ele ainda será acionado.
22415 Matthew Flaschen
-12

Encontrei uma solução para isso também. Esta página me ajudou hoje, então também estou postando novamente aqui.

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

O código acima é o código para um botão. Você pressiona o botão e ele redesenha a tela atual da compra à pré-aprovação. Ao mesmo tempo, abre uma nova janela e entrega essa nova janela ao PayPal.

user2737761
fonte
5
O OP disse que eles são novos para o código - IMO postar uma carga inteira de (horrivelmente formatado) código comunitário relativo aos botões PayPal não vai ajudá-los
Mike