Serialize with pure JavaScript
Using jQuery I can use the method .serialize()
to return in string form all the items of the form with their respective values, such as, 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()
from jQuery) but using pure JavaScript?
Consider that the above form is just a basic example. We form may have other elements, such as
select
,textarea
,button
etc.
2 answers
Using o FormData
:
var form = document.querySelector('form');
var data = new FormData(form);
console.log(data);
The answer of @Diego Souza is perfect, but I will leave here a reference to aggregate information. Is there a script that does the same function in this link, but instead of returning an object (as in the quoted answer), it returns a string similar to jQuery's .serialize()
.
The use 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>