Serializar formulario jQuery - cadena vacía

94

Mi html:

 <script type="text/javascript">

    $(function() {

        $("#bt1").click(function() {

            var f = $("#form1");
            var formData = f.serialize();

            alert(formData);
        });

    }); 
</script> 

 <div id="div1">
      <form id="form1" action="/Home/Test1" method="post" name="down">
        <div id="div2">
            <input id="input1" type="text" value="2" />
        </div>    
      </form>
  </div>

 <input type="submit" id="bt1" />

Cuando enciendo el evento click, formData está vacío. Estoy usando jQuery 1.4.2.

usuario137348
fuente

Respuestas:

213

Tienes que darle inputun nombre al elemento. P.ej:

<form id="form1" action="/Home/Test1" method="post" name="down">
    <div id="div2">
        <input id="input1" type="text" value="2" name="foo"/>
    </div>    
</form>

le dará en el cuadro de alerta foo=2.

.serialize()toma el nombre y el valor de los campos del formulario y crea una cadena como name1=value1&name2=value2. Sin un nombre, no puede crear tal cadena.

Tenga en cuenta que namees algo diferente a id. Su formulario tampoco habría funcionado si lo hubiera utilizado de la forma "normal". Cada campo de formulario necesita un nombre.

Felix Kling
fuente
1
¿Son necesarios los identificadores para serializar el formulario por cierto?
Vic
Permítanme sugerir que se incluya también aquí la respuesta de Madbreaks.
Eslavo
Tengo un nombre, pero todavía tengo la cadena vacía cuando serializo mi vista es una colección, por lo que los nombres son, por ejemplo, [0] .Unidad, [0]. Moneda
Marc Roussel
La respuesta a continuación me ayudó ... ¡asegúrese de que sus entradas no estén DESHABILITADAS!
soundtripe
82

Aunque no se aplica a este ejemplo en particular, el mismo comportamiento ocurre si una o más entradas de formulario es disabled. Esas entradas no aparecerán en la cadena serializada. En mi caso, todas las entradas de formulario tenían valores pero estaban deshabilitadas, lo que resultaba en la devolución de una cadena vacía.

Madbreaks
fuente
4
Eso es desagradable. Quería deshabilitar los campos mientras envío el correo al estilo ajax y lo hice antes de serializar el formulario ...
Daniel Lang
1
Oh, Dios mío, este era un problema que me estaba volviendo loco. +1 hombre, ¿alguna forma de hacerlo funcionar en elementos discapacitados?
Noitidart
@Noitidart Puede escribir su propia serializeextensión jQuery que itera sobre las entradas e incluye las deshabilitadas. Pero no hay forma de hacerlo, hasta donde yo sé, usando jQuery listo para usar.
Madbreaks
Tiene sentido no incluir elementos deshabilitados, ya que los elementos deshabilitados no deben contener información de usuario.
Jenny O'Reilly
2
@ JennyO'Reilly Seguro, pero no contener la entrada del usuario no significa "no tiene un valor".
Madbreaks
10

No hay ningún nameatributo en la entrada ... que puede ser un problema para serializar.

<input id="input1" type="text" value="2" name="input1" />
Víctor
fuente
Hombre. ¡¡Eres un gran salvador !! Gracias.
Anjana Silva
6

También asegúrese de que no haya 2 elementos con la misma identificación en la página.

VahidN
fuente
3
Este es un comentario, no una respuesta a la pregunta. Utilice los comentarios en el futuro. Gracias :)
Gone Coding