javascript - validacion - Form onSubmit determine qué botón de envío se presionó
validar formulario javascript html5 (8)
Esta pregunta ya tiene una respuesta aquí:
Tengo un formulario con dos botones de envío y algunos códigos:
HTML:
<input type="submit" name="save" value="Save" />
<input type="submit" name="saveAndAdd" value="Save and add another" />
Javascript:
form.onSubmit = function(evnt) {
// Do some asyncrhnous stuff, that will later on submit the form
return false;
}
Por supuesto, los dos botones de envío logran cosas diferentes. ¿Hay alguna manera de averiguar en onSubmit qué botón se presionó, para luego poder enviar haciendo thatButton.click() ?
Idealmente, me gustaría no modificar el código de los botones, solo tengo un complemento de JavaScript puro que tiene este comportamiento.
Sé que FF tiene evnt.explicitOriginalTarget pero no puedo encontrar nada para otros navegadores.
¿Por qué no recorrer las entradas y luego agregar manejadores onclick a cada una?
No tiene que hacer esto en HTML, pero puede agregar un controlador a cada botón como:
button.onclick = function(){ DoStuff(this.value); return false; } // return false; so that form does not submit
Entonces su función podría "hacer cosas" de acuerdo con el valor que haya pasado:
function DoStuff(val) {
if( val === "Val 1" ) {
// Do some stuff
}
// Do other stuff
}
Huesos desnudos, pero el trabajo confirmado, ejemplo:
<script type="text/javascript">
var clicked;
function mysubmit() {
alert(clicked);
}
</script>
<form action="" onsubmit="mysubmit();return false">
<input type="submit" onclick="clicked=''Save''" value="Save" />
<input type="submit" onclick="clicked=''Add''" value="Add" />
</form>
No en el controlador de eventos de envío en sí, no.
Pero lo que puede hacer es agregar manejadores de clics a cada envío, lo cual informará al manejador de envío el lugar en el que se hizo clic.
Aquí hay un ejemplo completo (usando jQuery para abreviar)
<html>
<head>
<title>Test Page</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(function($) {
var submitActor = null;
var $form = $(''#test'');
var $submitActors = $form.find(''input[type=submit]'');
$form.submit(function(event) {
if (null === submitActor) {
// If no actor is explicitly clicked, the browser will
// automatically choose the first in source-order
// so we do the same here
submitActor = $submitActors[0];
}
console.log(submitActor.name);
// alert(submitActor.name);
return false;
});
$submitActors.click(function(event) {
submitActor = this;
});
});
</script>
</head>
<body>
<form id="test">
<input type="text" />
<input type="submit" name="save" value="Save" />
<input type="submit" name="saveAndAdd" value="Save and add another" />
</form>
</body>
</html>
OP declaró que no quería modificar el código de los botones. Esta es la respuesta menos intrusiva que podría llegar a usar las otras respuestas como guía. No requiere campos ocultos adicionales, le permite dejar intacto el código del botón (a veces no tiene acceso a lo que lo genera), y le brinda la información que estaba buscando desde cualquier parte de su código ... qué botón fue utilizado para enviar el formulario. No he evaluado qué sucede si el usuario usa la tecla Intro para enviar el formulario, en lugar de hacer clic.
<script language="javascript" type="text/javascript">
var initiator = '''';
$(document).ready(function() {
$(":submit").click(function() { initiator = this.name });
});
</script>
Luego tiene acceso a la variable ''iniciador'' en cualquier lugar que pueda necesitar hacer la verificación. Espero que esto ayude.
~ Spanky
Todas las respuestas anteriores son muy buenas, pero lo limpié un poco.
Esta solución automáticamente coloca el nombre del botón de enviar presionado en el campo de acción oculta. Tanto el javascript en la página como el código del servidor pueden verificar el valor del campo oculto de acción según sea necesario.
La solución usa jquery para aplicar automáticamente a todos los botones de envío.
<input type="hidden" name="action" id="action" />
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//when a submit button is clicked, put its name into the action hidden field
$(":submit").click(function () { $("#action").val(this.name); });
});
</script>
<input type="submit" class="bttn" value="<< Back" name="back" />
<input type="submit" class="bttn" value="Finish" name="finish" />
<input type="submit" class="bttn" value="Save" name="save" />
<input type="submit" class="bttn" value="Next >>" name="next" />
<input type="submit" class="bttn" value="Delete" name="delete" />
<input type="button" class="bttn" name="cancel" value="Cancel" onclick="window.close();" />
Luego, escriba un código como este en su controlador de envío de formularios.
if ($("#action").val() == "delete") {
return confirm("Are you sure you want to delete the selected item?");
}
Yo uso Ext, así que terminé haciendo esto:
var theForm = Ext.get("theform");
var inputButtons = Ext.DomQuery.jsSelect(''input[type="submit"]'', theForm.dom);
var inputButtonPressed = null;
for (var i = 0; i < inputButtons.length; i++) {
Ext.fly(inputButtons[i]).on(''click'', function() {
inputButtonPressed = this;
}, inputButtons[i]);
}
y luego, cuando era hora de enviar, lo hice
if (inputButtonPressed !== null) inputButtonPressed.click();
else theForm.dom.submit();
Espera, dices. Esto funcionará si no tienes cuidado. Por lo tanto, onSubmit a veces debe devolver true
// Notice I''m not using Ext here, because they can''t stop the submit
theForm.dom.onsubmit = function () {
if (gottaDoSomething) {
// Do something asynchronous, call the two lines above when done.
gottaDoSomething = false;
return false;
}
return true;
}
Primera sugerencia:
Cree una variable de Javascript que hará referencia al botón al que se hizo clic. Vamos a llamarlo buttonIndex
<input type="submit" onclick="buttonIndex=0;" name="save" value="Save" />
<input type="submit" onclick="buttonIndex=1;" name="saveAndAdd" value="Save and add another" />
Ahora, puedes acceder a ese valor. 0 significa que se hizo clic en el botón Guardar, 1 significa que se hizo clic en el botón GuardarAñadir.
Segunda sugerencia
La forma en que manejaría esto es crear dos funciones JS que manejen cada uno de los dos botones.
Primero, asegúrese de que su formulario tenga una identificación válida. Para este ejemplo, diré que la identificación es "myForm"
cambio
<input type="submit" name="save" value="Save" />
<input type="submit" name="saveAndAdd" value="Save and add another" />
a
<input type="submit" onclick="submitFunc();return(false);" name="save" value="Save" />
<input type="submit" onclick="submitAndAddFunc();return(false);" name="saveAndAdd" value="Save and add
la devolución (falsa) evitará que el envío de su formulario se procese, y llamará a sus funciones personalizadas, donde podrá enviar el formulario más adelante.
Entonces tus funciones funcionarán de la siguiente manera ...
function submitFunc(){
// Do some asyncrhnous stuff, that will later on submit the form
if (okToSubmit) {
document.getElementById(''myForm'').submit();
}
}
function submitAndAddFunc(){
// Do some asyncrhnous stuff, that will later on submit the form
if (okToSubmit) {
document.getElementById(''myForm'').submit();
}
}
<form onsubmit="alert(this.submited); return false;">
<input onclick="this.form.submited=this.value;" type="submit" value="Yes" />
<input onclick="this.form.submited=this.value;" type="submit" value="No" />
</form>
jsfiddle por el mismo