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.

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.


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.


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

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.


3
Este es un comentario, no una respuesta a la pregunta. Utilice los comentarios en el futuro. Gracias :)
Gone Coding
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.