serializar formulário jQuery - string vazia


94

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

Quando eu acionar o evento click, formData está vazio. Estou usando o jQuery 1.4.2.

Respostas:


213

Você tem que dar inputum nome ao elemento. Por exemplo:

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

lhe dará na caixa de alerta foo=2.

.serialize()pega o nome e o valor dos campos do formulário e cria uma string como name1=value1&name2=value2. Sem um nome, ele não pode criar tal string.

Observe que nameé algo diferente de id. Seu formulário também não teria funcionado se você o usasse da maneira "normal". Cada campo de formulário precisa de um nome.


1
são necessários ids para o form serialize btw?
Vic

Deixe-me sugerir incluir a resposta de Madbreaks aqui também.
Eslavo

Eu tenho um nome, mas ainda tenho a string vazia ao serializar minha visão é uma coleção, então os nomes são, por exemplo, [0] .Unit, [0] .Currency
Marc Roussel

A resposta abaixo me ajudou ... certifique-se de que suas entradas não estejam DESATIVADAS!
banda sonora de

82

Embora não se aplique a este exemplo específico, o mesmo comportamento ocorre se uma ou mais entradas de formulário forem disabled. Essas entradas não aparecerão na string serializada. No meu caso, todas as entradas do formulário tinham valores, mas foram desabilitadas, resultando no retorno de uma string vazia.


4
Essa é desagradável. Queria desabilitar os campos enquanto estou enviando o e-mail no estilo ajax e fiz isso antes de serializar o formulário ...
Daniel Lang

1
Oh meu Deus, esse era um problema que estava me deixando louco. +1 homem, alguma maneira de fazer funcionar em elementos deficientes?
Noitidart

@Noitidart Você pode escrever sua própria serializeextensão jQuery que itera sobre as entradas e inclui as desativadas. Mas não há como fazer isso, até onde eu sei, usando jQuery pronto para uso.
Madbreaks

Faz sentido não incluir elementos desativados, uma vez que os elementos desativados não devem conter entrada do usuário.
Jenny O'Reilly

2
@ JennyO'Reilly Claro, mas não contendo a entrada do usuário não significa "não tem um valor".
Madbreaks

10

Não há nenhum nameatributo na entrada ... isso pode ser um problema para serializar.

<input id="input1" type="text" value="2" name="input1" />

Homem. Você é um salvador de vida !! Obrigado.
Anjana Silva

6

Verifique também se não há 2 elementos com o mesmo id na página.


3
Este é um comentário, não uma resposta à pergunta. Por favor, use comentários no futuro. Obrigado :)
Gone Coding
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.