web-dev-qa-db-fra.com

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

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

Le formulaire a un seul attribut action="".

Cependant, je souhaite avoir 2 attributs target="" différents en fonction du 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!

javascripthtmlformssubmit
71
Stoob

Il est plus approprié d'aborder ce problème avec la mentalité voulant qu'un formulaire ait une action par défaut liée à un bouton d'envoi, puis une action alternative liée à un bouton simple. La différence ici est que, quelle que soit l'option sélectionnée, celle utilisée sera celle utilisée lorsqu'un utilisateur soumettra le formulaire en appuyant sur Entrée, tandis que l'autre ne sera déclenchée que lorsqu'un utilisateur clique explicitement sur le bouton.

Quoi qu'il en soit, dans cet 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 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 lient le code à l'événement click du bouton d'envoi ne fonctionneront pas sur IE.

61
Paolo Bergantino

Je fais cela sur le serveur. C'est-à-dire que le formulaire est toujours soumis à la même cible, mais j'ai un script côté serveur qui est responsable de la redirection vers l'emplacement approprié en fonction du bouton enfoncé.

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é GET, mais cela fonctionne aussi pour POST

Ensuite, vous pouvez facilement déterminer le bouton sur lequel vous avez appuyé - si la variable retry existe et a une valeur, appuyez de nouveau sur, et si la variable abort existe et a une valeur, vous avez appuyé sur abort. Cette connaissance peut ensuite être utilisée pour rediriger vers le lieu approprié.

Cette méthode ne nécessite pas de Javascript.

Remarque: que certains navigateurs sont capables de soumettre un formulaire sans appuyer sur aucun bouton (en appuyant sur entrée). Non standard comme cela est, vous devez en rendre compte, en ayant une action default claire et l'activation à chaque fois que vous n'appuyez sur aucun bouton. En d'autres termes, assurez-vous que votre formulaire fait quelque chose de sensé (qu'il s'agisse d'un message d'erreur utile ou de la valeur par défaut) lorsque quelqu'un les hits entrent dans un élément de formulaire différent au lieu de cliquer sur submit bouton, plutôt que de simplement casser.

75
thomasrutter

Si vous avez atteint le niveau HTML5, vous pouvez simplement utiliser l'attribut formaction. Cela vous permet d’avoir une forme différente action pour chaque bouton.

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

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";' />
6
trojan

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');">
4
tekBlues

Exemple:

<input 
  type="submit" 
  onclick="this.form.action='new_target.php?do=alternative_submit'" 
  value="Alternative Save"
/>

Voila . Très "fantaisie", trois Word JavaScript!

2
Rolf

Simple et facile à comprendre, ceci envoie le nom du bouton sur lequel vous avez cliqué, puis vous permet de faire ce que vous voulez. Cela peut réduire le besoin de deux cibles. Moins de pages ...!

<form action="twosubmits.php" medthod ="post">
<input type = "text" name="text1">

<input type="submit"  name="scheduled" value="Schedule Emails">
<input type="submit"  name="single" value="Email Now">
</form>

twosubmits.php

<?php
if (empty($_POST['scheduled'])) {
// do whatever or collect values needed
die("You pressed single");
}

if (empty($_POST['single'])) {
// do whatever or collect values needed
die("you pressed scheduled");
}
?>
2
Mikeys4u

C'est faisable côté serveur.

<button type="submit" name="signin" value="email_signin" action="/signin">Sign In</button>
<button type="submit" name="signin" value="facebook_signin"  action="/facebook_login">Facebook</button>

et dans mon script côté serveur de noeud

app.post('/', function(req, res) {
if(req.body.signin == "email_signin"){
            function(email_login) {...} 
        }
if(req.body.signin == "fb_signin"){
            function(fb_login) {...}    


        }
    });
1
Yunus Khan

Voici un exemple de script rapide qui affiche un formulaire qui modifie le type de cible:

<script type="text/javascript">
    function myTarget(form) {
        for (i = 0; i < form.target_type.length; i++) {
            if (form.target_type[i].checked)
                val = form.target_type[i].value;
        }
        form.target = val;
        return true;
    }
</script>
<form action="" onSubmit="return myTarget(this);">
    <input type="radio" name="target_type" value="_self" checked /> Self <br/>
    <input type="radio" name="target_type" value="_blank" /> Blank <br/>
    <input type="submit">
</form>
1
Kai

HTML: 

<form method="get">
<input type="text" name="id" value="123"/>
<input type="submit" name="action" value="add"/>
<input type="submit" name="action" value="delete"/>
</form>

JS: 

$('form').submit(function(ev){ 
ev.preventDefault();
console.log('clicked',ev.originalEvent,ev.originalEvent.explicitOriginalTarget) 
})

http://jsfiddle.net/arzo/unhc3/

1
test30
<form id='myForm'>
    <input type="button" name="first_btn" id="first_btn">
    <input type="button" name="second_btn" id="second_btn">
</form>

<script>

$('#first_btn').click(function(){
    var form = document.getElementById("myForm")
    form.action = "https://foo.com";
    form.submit();
});

$('#second_btn').click(function(){
    var form = document.getElementById("myForm")
    form.action = "http://bar.com";
    form.submit();
});

</script>
1
jbowen7

Solution alternative. Ne vous faites pas avoir avec onclick, les boutons, le côté serveur et tout. Il suffit de créer un nouveau formulaire avec une action différente comme celle-ci.

<form method=post name=main onsubmit="return validate()" action="scale_test.html">
<input type=checkbox value="AC Hi-Side Pressure">AC Hi-Side Pressure<br>
<input type=checkbox value="Engine_Speed">Engine Speed<br>
<input type=submit value="Linear Scale" />
</form>
<form method=post name=main1 onsubmit="return v()" action=scale_log.html>
<input type=submit name=log id=log value="Log Scale">
</form>

Maintenant, en Javascript, vous pouvez obtenir tous les éléments du formulaire principal dans v() à l'aide de getElementsByTagName () . Pour savoir si la case à cocher est cochée ou non

function v(){
var check = document.getElementsByTagName("input");

    for (var i=0; i < check.length; i++) {
        if (check[i].type == 'checkbox') {
            if (check[i].checked == true) {

        x[i]=check[i].value
            }
        }
    }
console.log(x);
}
0
Kaushal Paneri

Sur chacun de vos boutons, vous pouvez avoir les éléments suivants:

<input type="button" name="newWin" onclick="frmSubmitSameWin();">
<input type="button" name="SameWin" onclick="frmSubmitNewWin();">

Ensuite, avoir quelques petites fonctions js;

<script type="text/javascript">
function frmSubmitSameWin() {
form.target = '';
form.submit();
}


function frmSubmitNewWin() {
form.target = '_blank';
form.submit();
}
</script>

Cela devrait faire l'affaire.

0
Christian

Cela pourrait aider quelqu'un:

Utilisez l'attribut formtarget 

<html>
  <body>
    <form>
      <!--submit on a new window-->
      <input type="submit" formatarget="_blank" value="Submit to first" />
      <!--submit on the same window-->
      <input type="submit" formaction="_self" value="Submit to second" />
    </form>
  </body>
</html>
0
Alika Matthew

Demandez aux deux boutons de soumettre à la page en cours, puis ajoutez ce code en haut:

<?php
    if(isset($_GET['firstButtonName'])
        header("Location: first-target.php?var1={$_GET['var1']}&var2={$_GET['var2']}");
    if(isset($_GET['secondButtonName'])
        header("Location: second-target.php?var1={$_GET['var1']}&var2={$_GET['var2']}");
?>

Cela pourrait également être fait avec $ _SESSION si vous ne voulez pas qu'ils voient les variables.

0
Brendan Long