Serialize with pure Javascript

Question

Using jQuery I can use the method .serialize() to return in string form all the form items with their respective values, for example, 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>
   <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>

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

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

Answer 1

Using the FormData:

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

console.log(data);

Answer 2

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

The use is very 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>