serialize - jquery forms w3schools
jQuery: ¿cómo obtener el botón en el que se hizo clic al enviar el formulario? (23)
Aquí está el enfoque que parece más limpio para mis propósitos.
En primer lugar, para cualquiera y todas las formas:
$(''form'').click(function(event) {
$(this).data(''clicked'',$(event.target))
});
Cuando este evento de clic se activa para un formulario, simplemente registra el objetivo original (disponible en el objeto del evento) al que se accederá más adelante. Este es un trazo bastante amplio, ya que se activará para cualquier clic en cualquier parte del formulario. Los comentarios de optimización son bienvenidos, pero sospecho que nunca causará problemas perceptibles.
Luego, en $ (''form''). Submit (), puede preguntar en qué se hizo clic por última vez, con algo como
if ($(this).data(''clicked'').is(''[name=no_ajax]'')) xhr.abort();
Tengo un evento .submit() configurado para el envío del formulario. También tengo varios formularios en la página, pero solo uno aquí para este ejemplo. Me gustaría saber en qué botón de envío se hizo clic sin aplicar un evento .click() a cada uno.
Aquí está la configuración:
<html>
<head>
<title>jQuery research: forms</title>
<script type=''text/javascript'' src=''../jquery-1.5.2.min.js''></script>
<script type=''text/javascript'' language=''javascript''>
$(document).ready(function(){
$(''form[name="testform"]'').submit( function(event){ process_form_submission(event); } );
});
function process_form_submission( event ) {
event.preventDefault();
//var target = $(event.target);
var me = event.currentTarget;
var data = me.data.value;
var which_button = ''?''; // <-- this is what I want to know
alert( ''data: '' + data + '', button: '' + which_button );
}
</script>
</head>
<body>
<h2>Here''s my form:</h2>
<form action=''nothing'' method=''post'' name=''testform''>
<input type=''hidden'' name=''data'' value=''blahdatayadda'' />
<input type=''submit'' name=''name1'' value=''value1'' />
<input type=''submit'' name=''name2'' value=''value2'' />
</form>
</body>
</html>
Además de aplicar un evento .click () en cada botón, ¿hay alguna forma de determinar en qué botón de envío se hizo clic?
Aquí hay una muestra, que usa this.form para obtener la forma correcta en la que se encuentra el envío, y campos de datos para almacenar el último elemento enfocado / clicado. También envolví el código de envío dentro de un tiempo de espera para asegurarme de que los eventos de clic sucedan antes de que se ejecute (algunos usuarios informaron en comentarios que en Chrome a veces se dispara un evento de clic después de un envío).
Funciona al navegar con teclas y con el mouse / dedos sin contar con los navegadores para enviar un evento de clic en la tecla RETORNO (aunque no está mal), agregué un controlador de eventos para eventos de enfoque para botones y campos.
Puede agregar botones de tipo = "enviar" a los elementos que se guardan cuando se hace clic.
En la demostración, establezco un borde rojo para mostrar el elemento seleccionado y una alerta que muestra el nombre y el valor / etiqueta.
Aquí está el FIDDLE
Y aquí está el (mismo) código:
Javascript:
$("form").submit(function(e) {
e.preventDefault();
// Use this for rare/buggy cases when click event is sent after submit
setTimeout(function() {
var $this=$(this);
var lastFocus = $this.data("lastFocus");
var $defaultSubmit=null;
if(lastFocus) $defaultSubmit=$(lastFocus);
if(!$defaultSubmit || !$defaultSubmit.is("input[type=submit]")) {
// If for some reason we don''t have a submit, find one (the first)
$defaultSubmit=$(this).find("input[type=submit]").first();
}
if($defaultSubmit) {
var submitName=$defaultSubmit.attr("name");
var submitLabel=$defaultSubmit.val();
// Just a demo, set hilite and alert
doSomethingWith($defaultSubmit);
setTimeout(function() {alert("Submitted "+submitName+": ''"+submitLabel+"''")},1000);
} else {
// There were no submit in the form
}
}.bind(this),0);
});
$("form input").focus(function() {
$(this.form).data("lastFocus", this);
});
$("form input").click(function() {
$(this.form).data("lastFocus", this);
});
// Just a demo, setting hilite
function doSomethingWith($aSelectedEl) {
$aSelectedEl.css({"border":"4px solid red"});
setTimeout(function() { $aSelectedEl.removeAttr("style"); },1000);
}
HTML DUMMY:
<form>
<input type="text" name="testtextortexttest" value="Whatever you write, sir."/>
<input type="text" name="moretesttextormoretexttest" value="Whatever you write, again, sir."/>
<input type="submit" name="test1" value="Action 1"/>
<input type="submit" name="test2" value="Action 2"/>
<input type="submit" name="test3" value="Action 3"/>
<input type="submit" name="test4" value="Action 4"/>
<input type="submit" name="test5" value="Action 5"/>
</form>
DUMB CSS:
input {display:block}
Como no puedo comentar sobre la respuesta aceptada, traigo aquí una versión modificada que debe tener en cuenta los elementos que están fuera del formulario (es decir, adjunto al formulario que usa el atributo form ). Esto es para el navegador moderno: http://caniuse.com/#feat=form-attribute . El closest(''form'') se usa como reserva para un atributo de form no admitido
$(document).on(''click'', ''[type=submit]'', function() {
var form = $(this).prop(''form'') || $(this).closest(''form'')[0];
$(form.elements).filter(''[type=submit]'').removeAttr(''clicked'')
$(this).attr(''clicked'', true);
});
$(''form'').on(''submit'', function() {
var submitter = $(this.elements).filter(''[clicked]'');
})
Cuando se envíe el formulario:
document.activeElementle dará el botón de envío en el que se hizo clic.document.activeElement.getAttribute(''value'')le dará el valor de ese botón.
Desea utilizar window.event.srcElement.id de esta manera:
function clickTheButton() {
var Sender = window.event.srcElement;
alert("the item clicked was " + Sender.id)
}
para un botón que se parece a:
<input type="button" id="myButton" onclick="clickTheButton();" value="Click Me"/>
obtendrá una alerta que dice: "el elemento que se hizo clic fue myButton.
En su ejemplo mejorado, puede agregar window.event.srcElement a process_form_submission y tendrá una referencia a cualquier elemento invocado al proceso.
Encontré que esto funcionó.
$(document).ready(function() {
$( "form" ).submit(function () {
// Get the submit button element
var btn = $(this).find("input[type=submit]:focus" );
});
}
Esta es la solución utilizada por mi y funciona muy bien:
// prevent enter key on some elements to prevent to submit the form
function stopRKey(evt) {
evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
var alloved_enter_on_type = [''textarea''];
if ((evt.keyCode == 13) && ((node.id == "") || ($.inArray(node.type, alloved_enter_on_type) < 0))) {
return false;
}
}
$(document).ready(function() {
document.onkeypress = stopRKey;
// catch the id of submit button and store-it to the form
$("form").each(function() {
var that = $(this);
// define context and reference
/* for each of the submit-inputs - in each of the forms on
the page - assign click and keypress event */
$("input:submit,button", that).bind("click keypress", function(e) {
// store the id of the submit-input on it''s enclosing form
that.data("callerid", this.id);
});
});
$("#form1").submit(function(e) {
var origin_id = $(e.target).data("callerid");
alert(origin_id);
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="form1" name="form1" action="" method="post">
<input type="text" name="text1" />
<input type="submit" id="button1" value="Submit1" name="button1" />
<button type="submit" id="button2" name="button2">
Submit2
</button>
<input type="submit" id="button3" value="Submit3" name="button3" />
</form>
Esto funciona para mí:
$("form").submit(function() {
// Print the value of the button that was clicked
console.log($(document.activeElement).val());
}
He encontrado que la mejor solución es
$(document.activeElement).attr(''id'')
Esto no solo funciona en las entradas, sino que también funciona en las etiquetas de los botones. También consigue el id del botón.
Hice esta misma pregunta: ¿Cómo puedo obtener el botón que causó el envío del evento de envío de formulario?
Terminé con esta solución y funcionó bastante bien:
$(document).ready(function() {
$("form").submit(function() {
var val = $("input[type=submit][clicked=true]").val();
// DO WORK
});
$("form input[type=submit]").click(function() {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
});
En su caso con múltiples formularios, es posible que tenga que modificar esto un poco, pero todavía debería aplicar
Me ayudó https://.com/a/17805011/1029257
Formulario enviado solo después de hacer clic en el botón de enviar.
var theBtn = $('':focus'');
if(theBtn.is('':submit''))
{
// ....
return true;
}
return false;
Otra posible solución es agregar un campo oculto en su formulario:
<input type="hidden" id="btaction"/>
Luego, en la función lista, agregue funciones para registrar qué tecla se presionó:
$(''form#myForm #btnSubmit'').click(function() {
$(''form#myForm #btaction'').val(0);
});
$(''form#myForm #btnSubmitAndSend'').click(function() {
$(''form#myForm #btaction'').val(1);
});
$(''form#myForm #btnDelete'').click(function() {
$(''form#myForm #btaction'').val(2);
});
Ahora, en el controlador de envío de formularios, lea la variable oculta y decida en función de ella:
var act = $(''form#myForm #btaction'').val();
Para mí, la mejor solución fue esta:
$(form).submit(function(e){
// Get the button that was clicked
var submit = $(this.id).context.activeElement;
// You can get its name like this
alert(submit.name)
// You can get its attributes like this too
alert($(submit).attr(''class''))
});
Puede crear el tipo de entrada = "oculto" como titular para la información de identificación de un botón.
<input type="hidden" name="button" id="button">
<input type="submit" onClick="document.form_name.button.value = 1;" value="Do something" name="do_something">
En este caso, el formulario pasa el valor "1" (id de su botón) en el envío. Esto funciona si onClick ocurre antes de enviar (?), De lo que no estoy seguro si siempre es cierto.
Si lo que quiere decir al no agregar un evento .click es que no desea tener controladores separados para esos eventos, puede manejar todos los clics (envíos) en una función:
$(document).ready(function(){
$(''input[type="submit"]'').click( function(event){ process_form_submission(event); } );
});
function process_form_submission( event ) {
event.preventDefault();
//var target = $(event.target);
var input = $(event.currentTarget);
var which_button = event.currentTarget.value;
var data = input.parents("form")[0].data.value;
// var which_button = ''?''; // <-- this is what I want to know
alert( ''data: '' + data + '', button: '' + which_button );
}
Similar a la respuesta de Stan pero:
- Si tiene más de un botón, solo tiene que obtener el primer botón => [0]
- Si el formulario puede enviarse con la tecla Intro, debe administrar un valor predeterminado => myDefaultButtonId
$(document).on(''submit'', function(event) {
event.preventDefault();
var pressedButtonId =
typeof $(":input[type=submit]:focus")[0] === "undefined" ?
"myDefaultButtonId" :
$(":input[type=submit]:focus")[0].id;
...
}
Sobre la base de lo que hicieron Stan y Yann-H, pero este es el primer botón predeterminado. La belleza de este enfoque general es que recoge tanto el clic como la tecla Intro (incluso si el foco no estaba en el botón. Si necesita permitir el ingreso en el formulario, solo responda a esto cuando el botón esté enfocado ( es decir, la respuesta de Stan). En mi caso, quería permitir ingresar para enviar el formulario, incluso si el enfoque actual del usuario estaba en el cuadro de texto.
También estaba usando un atributo ''nombre'' en lugar de ''id'' pero este es el mismo enfoque.
var pressedButtonName =
typeof $(":input[type=submit]:focus")[0] === "undefined" ?
$(":input[type=submit]:first")[0].name :
$(":input[type=submit]:focus")[0].name;
También hice una solución, y funciona bastante bien:
Utiliza jQuery y CSS.
Primero, hice una clase de CSS rápida, esto puede ser incrustado o en un archivo separado.
<style type=''text/css''>
.Clicked {
/*No Attributes*/
}
</style>
A continuación, en el evento de clic de un botón dentro del formulario, agregue la clase CSS al botón. Si el botón ya tiene la clase CSS, elimínelo. (No queremos dos clases de CSS [por si acaso]).
// Adds a CSS Class to the Button That Has Been Clicked.
$("form :input[type=''submit'']").click(function ()
{
if ($(this).hasClass("Clicked"))
{
$(this).removeClass("Clicked");
}
$(this).addClass("Clicked");
});
Ahora, pruebe el botón para ver si tiene la clase CSS, si el botón probado no tiene el CSS, entonces el otro botón sí lo hará.
// On Form Submit
$("form").submit(function ()
{
// Test Which Button Has the Class
if ($("input[name=''name1'']").hasClass("Clicked"))
{
// Button ''name1'' has been clicked.
}
else
{
// Button ''name2'' has been clicked.
}
});
¡Espero que esto ayude! ¡Aclamaciones!
Trabajando con esta excelente respuesta , puede verificar el elemento activo (el botón), agregar una entrada oculta al formulario y, opcionalmente, eliminarlo al final del controlador de envío.
$(''form.form-js'').submit(function(event){
var frm = $(this);
var btn = $(document.activeElement);
if(
btn.length &&
frm.has(btn) &&
btn.is(''button[type="submit"], input[type="submit"], input[type="image"]'') &&
btn.is(''[name]'')
){
frm.append(''<input type="hidden" id="form-js-temp" name="'' + btn.attr(''name'') + ''" value="'' + btn.val() + ''">'');
}
// Handle the form submit here
$(''#form-js-temp'').remove();
});
Nota al margen: personalmente agrego la clase form-js en todos los formularios que se envían a través de JavaScript.
Una forma sencilla de distinguir qué <botón> o <tipo de entrada = "botón" ...> se presiona, es mediante la verificación de su ''id'':
$("button").click(function() {
var id = $(this).attr(''id'');
...
});
Wow, algunas soluciones pueden complicarse! Si no le importa usar un simple global, simplemente aproveche el hecho de que el evento de clic del botón de entrada se dispara primero. Uno podría filtrar aún más el selector $ (''input'') para una de las muchas formas usando $ (''# myForm input'').
$(document).ready(function(){
var clkBtn = "";
$(''input[type="submit"]'').click(function(evt) {
clkBtn = evt.target.id;
});
$("#myForm").submit(function(evt) {
var btnID = clkBtn;
alert("form submitted; button id=" + btnID);
});
});
Este funciono para mi
$(''#Form'').submit(function(){
var btn= $(this).find("input[type=submit]:focus").val();
alert(''you have clicked ''+ btn);
}
$("form input[type=submit]").click(function() {
$("<input />")
.attr(''type'', ''hidden'')
.attr(''name'', $(this).attr(''name''))
.attr(''value'', $(this).attr(''value''))
.appendTo(this)
});
agregar campo oculto