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


127

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>

Réponses:


272

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

5
si vous ajoutez la cible = _blank, vous n'avez pas besoin de l'événement onClick.
WhyNotHugo

5
Heureux d'être tombé sur ce post! L'ajout de target = "_ blank" à la balise form a résolu mon problème de devoir ouvrir une nouvelle fenêtre!
kaitlynjanine

3
cela ne répond pas exactement à la question de l'OP, mais c'est la réponse la plus utile en général - utilisation target="_blank"au lieu de Javascript
Kip

2
target = "blank" fonctionne très bien. developer.mozilla.org/en-US/docs/HTML/Element/form
Eric

5
au moins sur IE 11, target = "_ blank" crée un nouvel onglet dans la fenêtre actuelle du navigateur au lieu de créer une nouvelle fenêtre de navigateur ..... IMHO, un nouvel onglet est différent d'une nouvelle fenêtre de navigateur
Marcelo Bezerra

33

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.


Cela permet de contrôler la taille de la fenêtre. Excellent.
Chalky

meilleure solution dans cette page, testée et fonctionne à la perfection.
Manny Ramirez

C'est exactement ce que je recherchais lors de la génération d'un PDF dans une fenêtre séparée lors de la soumission.
jrob007

7

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

7

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.

Très utile lorsque vous avez plusieurs boutons de soumission.
hrvoj3e

On dirait qu'ils ont supprimé ce contenu de la page des éléments d'entrée. Des informations similaires sur l'attribut formtarget peuvent être trouvées sur la page des éléments de bouton: developer.mozilla.org/en-US/docs/Web/HTML/Element/…
peater

3

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.


2

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');

0

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.


-4

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.


1
onclick sur le bouton d'entrée est faux. Ensuite, si l'utilisateur clique dessus, mais s'éloigne avant de le relâcher, il se déclenchera toujours.
Matthew Flaschen

-12

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.


5
L'OP a déclaré qu'il était nouveau dans le code - l'OMI publiant une charge entière de code (horriblement formaté) concernant les boutons Paypal ne les aidera pas
Mike
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.