web-dev-qa-db-fra.com

Comment ouvrir une nouvelle fenêtre sur le formulaire de soumission

J'ai un formulaire de soumission et je souhaite ouvrir une nouvelle fenêtre lorsque les utilisateurs soumettent le formulaire afin que je puisse le suivre dans les analyses.

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>
formssubmit
121
Jack

Pas besoin de Javascript, il vous suffit d'ajouter un attribut target="_blank" 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"
>
255
Konstantinos

Dans une application de base de données Web qui utilise une fenêtre contextuelle pour afficher les impressions des données de la base de données, cela a 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'attribut target de la balise <form> avec le deuxième argument de l'appel window.open du gestionnaire onsubmit.

27
Awerealis

onclick n'est peut-être pas le meilleur événement auquel attacher cette action. Chaque fois que quelqu'un clique n'importe où dans le formulaire, la fenêtre s'ouvrira.

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

Pour obtenir un effet similaire sur l'attribut target du formulaire, vous pouvez également utiliser l'attribut formtarget de input[type="submit]" ou button[type="submit"].

De MDN :

... cet attribut est un nom ou un mot clé indiquant où afficher la réponse reçue après la soumission du formulaire. Il s'agit d'un nom ou d'un mot clé pour un contexte de navigation (par exemple, un onglet, une fenêtre ou un 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 du contexte actuel. 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 de l'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.
6
alxs

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

"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.open soit également entouré de guillemets.

3
Sourabh

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

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

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

cela fera fonctionner votre action d'envoi et ouvrira un lien dans un nouvel onglet, que vous souhaitiez rouvrir l'URL d'action ou un nouveau lien.

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

Ce code fonctionne pour moi parfait ..

0
Abhi