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

Question

Salut J'ai un html <forme>. Le formulaire ne possède qu'un attribut action="".

Cependant, je souhaite avoir 2 attributs target="" différents selon le bouton sur lequel vous cliquez pour envoyer le formulaire. C'est probablement du javascript de fantaisie, mais je n'ai pas d'idée par où commencer.

Des idées comment je pourrais créer deux boutons, chacun soumet le même formulaire, mais chaque bouton donne à la forme une cible différente?

MERCI!

Answer 1

Il est plus approprié d'aborder ce problème avec la mentalité qu'une forme aura une action par défaut liée à un bouton d'envoi , puis une autre action liée à un bouton simple. La différence ici est que, quel que soit celui qui passe sous le soumettre sera celui utilisé quand un utilisateur soumet le formulaire en appuyant sur Entrée, tandis que l'autre ne sera tiré quand 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(); 
} 

approches qui lient le code à l'événement clic du bouton Envoyer ne fonctionnera pas sur IE.

Answer 2

Dans cet exemple, tiré de

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

Vous pouvez voir la façon 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');"> 

Answer 3

Sur chacun de vos boutons, vous pourriez avoir les éléments suivants;

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

Ensuite, ayez 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.

Answer 4

Voici un exemple de script rapide qui affiche une forme qui change 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> 

Answer 5

Je le fais côté serveur. En d'autres termes, 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, comme

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

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

</form> 

Note: J'utilise GET, mais il fonctionne pour POST trop

Ensuite, vous pouvez facilement déterminer quel bouton a été pressé - si la variable retry existe et a une valeur, alors une nouvelle tentative a été effectuée, et si la variable abort existe et a une valeur, alors abort a été pressé. Cette connaissance peut ensuite être utilisée pour rediriger vers l'endroit approprié.

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

Note: que certains navigateurs sont capables de soumettre un formulaire sans appuyer sur les boutons (en appuyant sur Entrée). Non standard comme c'est, vous devez en tenir compte, en ayant une action claire default et activant que chaque fois que vous n'appuyez sur aucun bouton. En d'autres termes, assurez-vous que votre formulaire ne quelque chose de sensé (que ce soit afficher un message d'erreur utile ou en supposant une valeur par défaut) lorsque quelqu'un visites entrent dans un élément de forme différente au lieu de cliquer sur un bouton d'envoi , plutôt que de simplement casser .

Answer 6

ont tous deux boutons 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']}"); 
?> 

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

Answer 7

Si vous êtes à 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> 

Answer 8

Exemple:

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

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

Answer 9

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/

Answer 10

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

Answer 11

simple et facile à comprendre, ce qui enverra le nom du bouton t Le chapeau a été cliqué, puis bifurque pour 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"); 
} 
?> 

Answer 12

Solution alternative. Ne vous fâchez pas avec onclick, les boutons, le côté serveur et tout. Créez simplement un nouveau formulaire avec différentes actions 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 de la forme principale en v() avec l'aide de getElementsByTagName(). Pour savoir si la case 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); 
} 

Answer 13

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

Answer 14

Il est faisable sur le 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 noeud script côté serveur

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


     } 
    }); 

Answer 15

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>