Formulario HTML con dos botones de envío y dos atributos de "destino"

Question

Hola Tengo un html <formulario>.

El formulario tiene un solo atributo action="".

Sin embargo, deseo tener 2 atributos diferentes de target="" dependiendo de qué botón haga clic para enviar el formulario. Este es probablemente un javascript sofisticado, pero no tengo ni idea de por dónde empezar.

¿Alguna idea de cómo podría crear dos botones, cada uno presenta la misma forma, pero cada botón le da a la forma un objetivo diferente?

GRACIAS!

Answer 1

Es más apropiado para abordar este problema con la mentalidad de que una forma tendrá una acción predeterminada vinculada a un botón Enviar , y luego una acción alternativa vinculada a un botón simple. La diferencia aquí es que cualquiera que sea inferior al envío será el utilizado cuando un usuario envíe el formulario presionando Enter, mientras que el otro solo se activará cuando un usuario haga clic explícitamente en el botón.

De todos modos, con esto en mente, esto debe hacerlo:

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

Con esta javascript:

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

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

Los enfoques que se unen código de evento de clic del botón de envío no funciona en IE.

Answer 2

En este ejemplo, tomado de

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

Se puede ver la forma de cambiar el destino en el botón de evento 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

En cada uno de sus botones puede tener lo siguiente;

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

Luego, tiene unas pocas funciones js pequeñas;

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


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

Eso debería hacer el truco.

Answer 4

Aquí es un script de ejemplo rápido que muestra un formulario que cambia el tipo de destino:

<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

Lo hago en el lado del servidor. Es decir, el formulario siempre se envía al mismo destino, pero tengo un script del lado del servidor que es responsable de redirigir a la ubicación adecuada dependiendo de qué botón se haya presionado.

Si tiene varios botones, como

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

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

</form> 

Nota: que utiliza GET, pero funciona para la POST demasiado

A continuación, puede determinar fácilmente qué botón se pulsa - si la variable retry existe y tiene un valor, entonces se presionó volver a intentar, y si la variable abort existe y tiene un valor, se pulsó abortar. Este conocimiento puede usarse para redireccionar al lugar apropiado.

Este método no necesita Javascript.

Nota: que algunos navegadores son capaces de enviar un formulario sin necesidad de pulsar ningún botón (pulsando enter). No estándar como esto es, tiene que dar cuenta de ello, teniendo una acción clara default y activando eso cuando no se presionen botones. En otras palabras, asegurarse de que su forma hace algo sensato (ya sea mostrando un mensaje de error útiles o asumiendo un defecto) cuando alguien éxitos entran en un elemento de forma diferente en lugar de hacer clic en un botón de envío, en lugar de romper .

Answer 6

tener ambos botones se someten a la página actual y luego agregar este código al principio:

<?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']}"); 
?> 

También se podría hacer usando $ _SESSION si no quieres que vean las variables.

Answer 7

Si estás hasta HTML5, sólo puede utilizar el atributo 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

Ejemplo:

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

Voila. ¡Muy "elegante", JavaScript de tres palabras!

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

Esto funciona para mí:

<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 y fácil de entender, esto enviará el nombre del botón t ha hecho clic en el sombrero, luego se ramificará para hacer lo que quiera. Esto puede reducir la necesidad de dos objetivos. ¡Menos páginas ...!

<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

Solución alternativa. No te equivoques con onclick, botones, lado del servidor y todo. Solo crea una nueva forma con diferentes acciones como esta.

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

Ahora en Javascript se pueden obtener todos los elementos de la forma principal en v() con la ayuda de getElementsByTagName(). Para saber si está marcada la casilla de verificación o no

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

Es factible en el lado del servidor.

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

y en mi nodo de script del lado del servidor

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

Esto podría ayudar a alguien:

utilizar el atributo 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>