Comment ouvrir une nouvelle fenêtre lors de la soumission du formulaire

J'ai un formulaire de soumission et je souhaite qu'il ouvre une nouvelle fenêtre lorsque les utilisateurs soumettent le formulaire afin que je puisse le suivre sur l'analyse.

Voici le code que j'utilise:

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

Pas besoin de Javascript, il vous suffit d'ajouter un target="_blank"attribut dans votre balise de formulaire.

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

Dans une application de base de données Web qui utilise une fenêtre contextuelle pour afficher des impressions de données de base de données, cela a suffisamment bien fonctionné pour nos besoins (testé dans Chrome 48):

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

L'astuce consiste à faire correspondre l' targetattribut de la <form>balise avec le deuxième argument de l' window.openappel dans le onsubmitgestionnaire.

onclickpeut ne pas être le meilleur événement auquel associer cette action. Chaque fois que quelqu'un clique n'importe où dans le formulaire, la fenêtre s'ouvre.

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

Pour un effet similaire à l' targetattribut de formulaire , vous pouvez également utiliser l' formtargetattribut input[type="submit]"ou button[type="submit"].

De MDN :

... cet attribut est un nom ou un mot-clé indiquant où afficher la réponse qui est reçue après l'envoi du formulaire. Il s'agit d'un nom ou d'un mot-clé pour un contexte de navigation (par exemple, onglet, fenêtre ou cadre en ligne). Si cet attribut est spécifié, il remplace l'attribut cible du propriétaire du formulaire des éléments. Les mots-clés suivants ont une signification particulière:

• _self: charge la réponse dans le même contexte de navigation que celui en cours. Cette valeur est la valeur par défaut si l'attribut n'est pas spécifié.
• _blank: charge la réponse dans un nouveau contexte de navigation sans nom.
• _parent: charge la réponse dans le contexte de navigation parent de la réponse actuelle. S'il n'y a pas de parent, cette option se comporte de la même manière que _self.
• _top: charge la réponse dans le contexte de navigation de niveau supérieur (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte actuel et qui n'a pas de parent). S'il n'y a pas de parent, cette option se comporte de la même manière que _self.

Le code que vous avez donné doit être corrigé. Dans la balise form, vous devez inclure la valeur d'attribut onClick entre guillemets doubles:

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

Vous devez également veiller à ce que le premier paramètre de window.opensoit également entouré de guillemets.

J'utilise généralement un petit extrait de jQuery globalement pour ouvrir tous les liens externes dans un nouvel onglet / fenêtre. J'ai ajouté le sélecteur pour un formulaire pour mon propre site et cela fonctionne très bien jusqu'à présent:

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

Je crois que cette jquery fonctionne bien pour vous s'il vous plaît vérifier un code ci-dessous.

cela fera fonctionner votre action de soumission et ouvrira un lien dans un nouvel onglet, que vous souhaitiez ouvrir à nouveau l'URL de l'action ou un nouveau lien

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

Ce code fonctionne parfaitement pour moi.

window.open ne fonctionne pas sur tous les navigateurs, recherchez-le sur Google et vous trouverez un moyen de détecter le type de dialogue approprié.

Déplacez également l'appel onclick vers le bouton d'entrée pour qu'il ne se déclenche que lorsque l'utilisateur soumet.

J'ai également trouvé une solution à cela. Cette page m'a aidé aujourd'hui donc, je publie ici aussi.

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

Le code ci-dessus est le code d'un bouton. Vous appuyez sur le bouton et il redessine l'écran actuel de l'achat à la pré-approbation. En même temps, il ouvre une nouvelle fenêtre et remet cette nouvelle fenêtre à PayPal.