11

Usando jQuery eu consigo usar o método .serialize() para retornar em forma de string todos os itens do formulário com seus respectivos valores, como, por exemplo, o formulário mais abaixo, irá me retornar:

nome=dvd&email=dvd%40dvd.com&sexo=1

Formulário:

$("form").on("submit", function(e){
   e.preventDefault();
   var form = $(this).serialize();
   console.log(form);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
   <input type="text" name="nome" value="dvd" />
   <br />
   <input type="text" name="email" value="[email protected]" />
   <br />
   <input type="radio" name="sexo" value="1" checked> masculino
   <input type="radio" name="sexo" value="2"> feminino
   <br />
   <input type="submit" value="Enviar" />
</form>

Como eu poderia obter a mesma string (resultado do serialize() do jQuery) mas usando JavaScript puro?

Considere que o formulário acima é apenas um exemplo básico. O formulário poderá ter outros elementos, como select, textarea, button etc.

2 Respostas 2

12

Usando o FormData:

var form = document.querySelector('form');
var data = new FormData(form);

console.log(data);
2
6

A resposta do @Diego Souza é perfeita, mas vou deixar aqui uma referência para agregar informação. Existe um script que faz a mesma função neste link, mas em vez de retornar um objeto (como na resposta citada), ele retorna uma string semelhante ao .serialize() do jQuery.

O uso é bem simples, como no exemplo abaixo:

function serialize(form){if(!form||form.nodeName!=="FORM"){return }var i,j,q=[];for(i=form.elements.length-1;i>=0;i=i-1){if(form.elements[i].name===""){continue}switch(form.elements[i].nodeName){case"INPUT":switch(form.elements[i].type){case"text":case"hidden":case"password":case"button":case"reset":case"submit":q.push(form.elements[i].name+"="+encodeURIComponent(form.elements[i].value));break;case"checkbox":case"radio":if(form.elements[i].checked){q.push(form.elements[i].name+"="+encodeURIComponent(form.elements[i].value))}break;case"file":break}break;case"TEXTAREA":q.push(form.elements[i].name+"="+encodeURIComponent(form.elements[i].value));break;case"SELECT":switch(form.elements[i].type){case"select-one":q.push(form.elements[i].name+"="+encodeURIComponent(form.elements[i].value));break;case"select-multiple":for(j=form.elements[i].options.length-1;j>=0;j=j-1){if(form.elements[i].options[j].selected){q.push(form.elements[i].name+"="+encodeURIComponent(form.elements[i].options[j].value))}}break}break;case"BUTTON":switch(form.elements[i].type){case"reset":case"submit":case"button":q.push(form.elements[i].name+"="+encodeURIComponent(form.elements[i].value));break}break}}return q.join("&")};

document.body.querySelector("form").onsubmit = function(){
   alert(serialize(document.forms[0]));
}
<form>
   <input type="text" name="nome" value="dvd" />
   <br />
   <input type="text" name="email" value="[email protected]" />
   <br />
   <input type="radio" name="sexo" value="1" checked> masculino
   <input type="radio" name="sexo" value="2"> feminino
   <br />
   <input type="submit" value="Enviar" />
</form>

1
  • 2
    Essa função de serializar é bem interessante. Porém, fui perceber que campos tipo "number" não estavam sendo considerados. Então acrescentei o tipo "number" após "des-minificar" a função. Se você achar necessário, posto abaixo ela com essa adição. Obrigado! 2/05/2019 às 14:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .