Serialize with pure JavaScript

Navigation
4

Using jQuery I can use the .serialize() method to return in the form of string all the items of the form with their respective values, such as the form below, will return me: 

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

Form: 

$("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><inputtype="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>

How could I get the same string (result of serialize() of jQuery) but using pure JavaScript?

  

Consider that the form above is just a basic example. O   form may have other elements, such as select , textarea , button   etc.

    
asked by anonymous 29.03.2018 / 01:58

2 answers

2

Using FormData : 

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

console.log(data);
    
29.03.2018 / 02:44
0

The answer from @Diego Souza is perfect, but I will leave here a reference to add information. There is a script that does the same function this link , but instead of returning an object (as in the response quoted), it returns a string similar to the .serialize() of jQuery.

The usage is quite simple, as in the example below: 

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>
    
29.03.2018 / 03:17
How to configure Autoload Composer? How to remove spaces in a text without turning it into number?