76 votes

Formulaire HTML avec deux boutons de soumission et deux attributs "cible"

Bonjour, j'ai un code HTML <formulaire>.

Le formulaire n'a qu'un seul attribut action="" .

Toutefois, je souhaite avoir 2 attributs différents target="" selon le bouton sur lequel vous cliquez pour soumettre le formulaire. C'est probablement du javascript sophistiqué, mais je ne sais pas par où commencer.

Des idées sur la façon dont je pourrais créer deux boutons, chacun soumettant le même formulaire, mais chaque bouton donnant au formulaire une cible différente?

MERCI!

77voto

thomasrutter Points 42905

Je le fais sur le côté serveur. Qui est, la forme toujours soumet à la même cible, mais j'ai un script côté serveur qui est en charge de la redirection vers l'emplacement approprié en fonction de ce bouton a été pressé.

Si vous avez plusieurs boutons, tels que

<form action="mypage" method="get">

  <input type="submit" name="retry" value="Retry" />
  <input type="submit" name="abort" value="Abort" />

</form>

(remarque, j'ai utilisé l'OBTENIR, mais il travaille pour le POST trop)

Ensuite, vous pouvez facilement déterminer quel bouton a été pressé - si la variable "réessayer" existe et a une valeur, puis réessayez a été pressé, et si la variable 'abort' existe et a une valeur alors abandonner a été pressé. Cette connaissance peut alors être utilisée pour rediriger vers l'endroit approprié.

Cette méthode n'a pas besoin de Javascript.

Notez que certains navigateurs sont capables de la soumission d'un formulaire sans appuyer sur un bouton (en appuyant sur entrée). Non-standard comme ce est, vous avez à rendre compte, en ayant une claire "par défaut" de l'action et de l'activer à chaque fois que l'absence de boutons enfoncés. En d'autres termes, assurez-vous que votre formulaire n' quelque chose d'intelligent (si c'est l'affichage d'un message d'erreur utile ou dans l'hypothèse d'un défaut) lorsque quelqu'un frappe entrer dans un autre élément de formulaire au lieu de cliquer sur un bouton de soumission, plutôt que de simplement casser.

63voto

Paolo Bergantino Points 199336

Il est plus approprié d'aborder ce problème avec la mentalité que vous avez un défaut d'action liée à un bouton envoyer, puis une action de substitution lié à un simple bouton. La différence ici est que celui qui va en vertu de la soumission sera celui utilisé lorsqu'un utilisateur soumet le formulaire en appuyant sur enter, tandis que l'autre ne seront déclenché lorsqu'un consentement explicite de l'utilisateur clique sur le bouton.

De toute façon, avec cela à l'esprit, cela devrait le faire:

<form id='myform' action='jquery.php' method='GET'>
    <input type='submit' id='btn1' value='Normal Submit'>
    <input type='button' id='btn2' value='New Window'>
</form>

Avec ce code javascript:

var form = document.getElementById('myform');
form.onsubmit = function() {
    form.target = '_self';
};

document.getElementById('btn2').onclick = function() {
    form.target = '_blank';
    form.submit();
}

Les approches qui se lient code de la soumettre événement click du bouton ne fonctionne pas sur IE.

52voto

koppor Points 2066

Si vous avez atteint le niveau HTML5, vous pouvez simplement utiliser l'attribut formaction :

 <!DOCTYPE html>
<html>
  <body>
    <form>
      <input type="submit" formaction="firsttarget" value="Submit to first" />
      <input type="submit" formaction="secondtarget" value="Submit to second" />
    </form>
  </body>
</html>
 

8voto

trojan Points 122

Cela fonctionne pour moi:

 <input type='submit' name='self' value='This window' onclick='this.form.target="_self";' />

<input type='submit' name='blank' value='New window' onclick='this.form.target="_blank";' />
 

6voto

tekBlues Points 4346

Dans cet exemple, tiré de

http://www.webdeveloper.com/forum/showthread.php?t=75170

Vous pouvez voir le moyen de changer la cible sur le bouton événement OnClick.

 function subm(f,newtarget)
{
document.myform.target = newtarget ;
f.submit();
}

<FORM name="myform" method="post" action="" target="" >

<INPUT type="button" name="Submit" value="Submit" onclick="subm(this.form,'_self');">
<INPUT type="button" name="Submit" value="Submit" onclick="subm(this.form,'_blank');">
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X