jquery - form - serialize ajax
jQuery serializeArray no incluye el botón de enviar que se hizo clic (4)
Esta solución es ''universal'', ya que manejará todos los envíos de entrada, pasando cada uno como una variable de formulario en el envío.
$(document).ready(function(){
$(''input:submit'').each(function(){
$(this).click(function(){
var formData = $(this).closest(''form'').serializeArray();
formData.push({ name: $(this).attr(''name''), value: $(this).val() });
});
});
});
Tengo un formulario que tiene dos botones. Uno para guardar un registro y el otro para cancelar el procedimiento de guardado. Estoy usando rails.js (un plugin AJAX / jQuery común para aquellos que no conocen) javascript file que funciona con jQuery para llamadas javascript / ajax discretas. Cuando envío los datos del formulario sobre ajax, deseo que el nombre y el valor del botón que hice clic se envíen con el resto de los datos para poder tomar una decisión sobre qué hacer en función del botón en el que se hizo clic.
El método en el archivo rails.js usa .serializeArray() para enviar datos de formulario al servidor. El problema es que esto no incluye el par de nombre / valor del botón en el que he hecho clic. El sitio web de jQuery afirma que lo hacen a propósito (aunque es mi opinión que deberían):
"El método .serializeArray() usa las reglas estándar del W3C para controles exitosos para determinar qué elementos debe incluir, en particular, el elemento no se puede deshabilitar y debe contener un atributo de nombre. Ningún valor del botón de envío se serializa ya que el formulario no se envió usando un botón."
¿Cómo pueden suponer que un formulario NO fue enviado usando un botón? Esto no tiene sentido y una suposición errónea, creo.
Según las reglas del W3C, el botón que se activó para enviar un formulario se considera un control exitoso .
Dado que los desarrolladores de jQuery han decidido hacerlo a propósito, ¿puedo suponer que hay otro método que NO excluye el botón activado en una serialización?
EDITAR: Aquí hay un ejemplo rápido de cómo se vería mi formulario ...
<!DOCTYPE html5>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(''#form'').submit(function(e) {
// put your breakpoint here to look at e
var x = 0;
});
});
</script>
</head>
<body>
<form id="form">
<input name="name" type="text"><br/>
<input name="commit" type="submit" value="Save"/>
<input name="commit" type="submit" value="Cancel"/>
</form>
</body>
No es así, el comportamiento se basa en el evento de submit del <form> , no de un botón , por ejemplo, pulsando enter o llamando a .submit() en JavaScript. Estás mezclando 2 conceptos aquí, un .serialize() o .serializeArray() pueden o no tener algo que ver con un clic de botón: es un evento aparte, no están conectados. Estos métodos en un nivel más alto que eso: puede serializar un formulario (o un subconjunto del mismo) en cualquier momento y por cualquier motivo.
Sin embargo, puede agregar el par de nombre / valor de envío como un formulario normal que se enviará desde ese botón, por ejemplo, si envía desde un botón:
$("#mySubmit").click(function() {
var formData = $(this).closest(''form'').serializeArray();
formData.push({ name: this.name, value: this.value });
//now use formData, it includes the submit button
});
Uso el siguiente fragmento, básicamente agrega un elemento oculto con el mismo nombre
var form = $("form");
$(":submit",form).click(function(){
if($(this).attr(''name'')) {
$(form).append(
$("<input type=''hidden''>").attr( {
name: $(this).attr(''name''),
value: $(this).attr(''value'') })
);
}
});
$(form).submit(function(){
console.log($(this).serializeArray());
});
var form = button.closest(''form'');
var serialize = form.serialize();
if (button.attr(''name'') !== undefined) {
serialize += ''&''+button.attr(''name'')+''='';
}