Wondering is there a function in javascript without jquery or any framework that allows me to serialize the form and access the serialized version?
This question is related to
javascript
forms
serialization
I could be crazy but I'm finding these answers seriously bloated. Here's my solution
function serialiseForm(form) {
var input = form.getElementsByTagName("input");
var formData = {};
for (var i = 0; i < input.length; i++) {
formData[input[i].name] = input[i].value;
}
return formData = JSON.stringify(formData);
}
I refactored TibTibs answer into something that's much clearer to read. It is a bit longer because of the 80 character width and a few comments.
Additionally, it ignores blank field names and blank values.
// Serialize the specified form into a query string.
//
// Returns a blank string if +form+ is not actually a form element.
function $serialize(form, evt) {
if(typeof(form) !== 'object' && form.nodeName !== "FORM")
return '';
var evt = evt || window.event || { target: null };
evt.target = evt.target || evt.srcElement || null;
var field, query = '';
// Transform a form field into a query-string-friendly
// serialized form.
//
// [NOTE]: Replaces blank spaces from its standard '%20' representation
// into the non-standard (though widely used) '+'.
var encode = function(field, name) {
if (field.disabled) return '';
return '&' + (name || field.name) + '=' +
encodeURIComponent(field.value).replace(/%20/g,'+');
}
// Fields without names can't be serialized.
var hasName = function(el) {
return (el.name && el.name.length > 0)
}
// Ignore the usual suspects: file inputs, reset buttons,
// buttons that did not submit the form and unchecked
// radio buttons and checkboxes.
var ignorableField = function(el, evt) {
return ((el.type == 'file' || el.type == 'reset')
|| ((el.type == 'submit' || el.type == 'button') && evt.target != el)
|| ((el.type == 'checkbox' || el.type == 'radio') && !el.checked))
}
var parseMultiSelect = function(field) {
var q = '';
for (var j=field.options.length-1; j>=0; j--) {
if (field.options[j].selected) {
q += encode(field.options[j], field.name);
}
}
return q;
};
for(i = form.elements.length - 1; i >= 0; i--) {
field = form.elements[i];
if (!hasName(field) || field.value == '' || ignorableField(field, evt))
continue;
query += (field.type == 'select-multiple') ? parseMultiSelect(field)
: encode(field);
}
return (query.length == 0) ? '' : query.substr(1);
}
my way...
const myForm = document.forms['form-name']
myForm.onsubmit=e=>
{
e.preventDefault() // for testing...
let data = Array.from(new FormData(myForm))
.reduce((r,[k,v])=>{r[k]=v;return r},{})
/*_______________________________________ same code: for beginners
let data = {}
Array.from(new FormData(myForm), (entry) => { data[ entry[0] ] = entry[1]} )
________________________________________________________________*/
console.log(data)
//...
}
A refactored version of @SimonSteinberger's code using less variables and taking advantage of the speed of forEach
loops (which are a bit faster than for
s)
function serialize(form) {
var result = [];
if (typeof form === 'object' && form.nodeName === 'FORM')
Array.prototype.slice.call(form.elements).forEach(function(control) {
if (
control.name &&
!control.disabled &&
['file', 'reset', 'submit', 'button'].indexOf(control.type) === -1
)
if (control.type === 'select-multiple')
Array.prototype.slice.call(control.options).forEach(function(option) {
if (option.selected)
result.push(encodeURIComponent(control.name) + '=' + encodeURIComponent(option.value));
});
else if (
['checkbox', 'radio'].indexOf(control.type) === -1 ||
control.checked
) result.push(encodeURIComponent(control.name) + '=' + encodeURIComponent(control.value));
});
return result.join('&').replace(/%20/g, '+');
}
If you target browsers that support the URLSearchParams
API (most recent browsers) and FormData(formElement)
constructor (most recent browsers), use this:
new URLSearchParams(new FormData(formElement)).toString()
For browsers that support URLSearchParams
but not the FormData(formElement)
constructor, use this FormData polyfill and this code (works everywhere except IE):
new URLSearchParams(Array.from(new FormData(formElement))).toString()
var form = document.querySelector('form');
var out = document.querySelector('output');
function updateResult() {
try {
out.textContent = new URLSearchParams(Array.from(new FormData(form)));
out.className = '';
} catch (e) {
out.textContent = e;
out.className = 'error';
}
}
updateResult();
form.addEventListener('input', updateResult);
_x000D_
body { font-family: Arial, sans-serif; display: flex; flex-wrap: wrap; }
input[type="text"] { margin-left: 6px; max-width: 30px; }
label + label { margin-left: 10px; }
output { font-family: monospace; }
.error { color: #c00; }
div { margin-right: 30px; }
_x000D_
<!-- FormData polyfill for older browsers -->
<script src="https://unpkg.com/[email protected]/formdata.min.js"></script>
<div>
<h3>Form</h3>
<form id="form">
<label>x:<input type="text" name="x" value="1"></label>
<label>y:<input type="text" name="y" value="2"></label>
<label>
z:
<select name="z">
<option value="a" selected>a</option>
<option value="b" selected>b</option>
</select>
</label>
</form>
</div>
<div>
<h3>Query string</h3>
<output for="form"></output>
</div>
_x000D_
For even older browsers (e.g. IE 10), use the FormData polyfill, an Array.from
polyfill if necessary and this code:
Array.from(
new FormData(formElement),
e => e.map(encodeURIComponent).join('=')
).join('&')
Improving upon David Lemon's answer.
This converts form data to JSON and allows you to set the form from a data object.
const main = () => {_x000D_
const form = document.forms['info'];_x000D_
const data = {_x000D_
"user_name" : "John",_x000D_
"user_email" : "[email protected]",_x000D_
"user_created" : "2020-03-24",_x000D_
"user_age" : 42,_x000D_
"user_subscribed" : true,_x000D_
"user_interests" : "sports",_x000D_
"user_message" : "Hello My Friend"_x000D_
};_x000D_
_x000D_
populateForm(form, data);_x000D_
updateJsonView(form);_x000D_
form.addEventListener('change', (e) => updateJsonView(form));_x000D_
}_x000D_
_x000D_
const getFieldValue = (field, opts) => {_x000D_
let type = field.getAttribute('type');_x000D_
if (type) {_x000D_
switch (type) {_x000D_
case 'checkbox':_x000D_
return field.checked;_x000D_
case 'number':_x000D_
return field.value.includes('.')_x000D_
? parseFloat(field.value)_x000D_
: parseInt(field.value, 10);_x000D_
}_x000D_
}_x000D_
if (opts && opts[field.name] && opts[field.name].type) {_x000D_
switch (opts[field.name].type) {_x000D_
case 'int':_x000D_
return parseInt(field.value, 10);_x000D_
case 'float':_x000D_
return parseFloat(field.value);_x000D_
}_x000D_
}_x000D_
return field.value;_x000D_
}_x000D_
_x000D_
const setFieldValue = (field, value) => {_x000D_
let type = field.getAttribute('type');_x000D_
if (type) {_x000D_
switch (type) {_x000D_
case 'checkbox':_x000D_
field.checked = value;_x000D_
break;_x000D_
default:_x000D_
field.value = value;_x000D_
break;_x000D_
}_x000D_
} else {_x000D_
field.value = value;_x000D_
}_x000D_
}_x000D_
_x000D_
const extractFormData = (form, opts) => {_x000D_
return Array.from(form.elements).reduce((data, element) => {_x000D_
return Object.assign(data, { [element.name] : getFieldValue(element, opts) });_x000D_
}, {});_x000D_
};_x000D_
_x000D_
const populateForm = (form, data) => {_x000D_
return Array.from(form.elements).forEach((element) => {_x000D_
setFieldValue(element, data[element.name]);_x000D_
});_x000D_
};_x000D_
_x000D_
const updateJsonView = (form) => {_x000D_
let fieldOptions = {};_x000D_
let formData = extractFormData(form, fieldOptions);_x000D_
let serializedData = JSON.stringify(formData, null, 2);_x000D_
document.querySelector('.json-view').textContent = serializedData;_x000D_
};_x000D_
_x000D_
main();
_x000D_
.form-field {_x000D_
margin-bottom: 0.5em;_x000D_
}_x000D_
_x000D_
.form-field label {_x000D_
display: inline-block;_x000D_
font-weight: bold;_x000D_
width: 7em;_x000D_
vertical-align: top;_x000D_
}_x000D_
_x000D_
.json-view {_x000D_
position: absolute;_x000D_
top: 0.667em;_x000D_
right: 0.667em;_x000D_
border: thin solid grey;_x000D_
padding: 0.5em;_x000D_
white-space: pre;_x000D_
font-family: monospace;_x000D_
overflow: scroll-y;_x000D_
max-height: 100%;_x000D_
}
_x000D_
<form name="info" action="/my-handling-form-page" method="post">_x000D_
<div class="form-field">_x000D_
<label for="name">Name:</label>_x000D_
<input type="text" id="name" name="user_name">_x000D_
</div>_x000D_
<div class="form-field">_x000D_
<label for="mail">E-mail:</label>_x000D_
<input type="email" id="mail" name="user_email">_x000D_
</div>_x000D_
<div class="form-field">_x000D_
<label for="created">Date of Birth:</label>_x000D_
<input type="date" id="created" name="user_created">_x000D_
</div>_x000D_
<div class="form-field">_x000D_
<label for="age">Age:</label>_x000D_
<input type="number" id="age" name="user_age">_x000D_
</div>_x000D_
<div class="form-field">_x000D_
<label for="subscribe">Subscribe:</label>_x000D_
<input type="checkbox" id="subscribe" name="user_subscribed">_x000D_
</div>_x000D_
<div class="form-field">_x000D_
<label for="interests">Interest:</label>_x000D_
<select required="" id="interests" name="user_interests">_x000D_
<option value="" selected="selected">- None -</option>_x000D_
<option value="drums">Drums</option>_x000D_
<option value="js">Javascript</option>_x000D_
<option value="sports">Sports</option>_x000D_
<option value="trekking">Trekking</option>_x000D_
</select>_x000D_
</div>_x000D_
<div class="form-field">_x000D_
<label for="msg">Message:</label>_x000D_
<textarea id="msg" name="user_message"></textarea>_x000D_
</div>_x000D_
</form>_x000D_
<div class="json-view"></div>
_x000D_
If you are looking to serialize the inputs on an event. Here's a pure JavaScript approach I use.
// serialize form
var data = {};
var inputs = [].slice.call(e.target.getElementsByTagName('input'));
inputs.forEach(input => {
data[input.name] = input.value;
});
Data will be a JavaScript object of the inputs.
Here is pure JavaScript approach:
var form = document.querySelector('form');
var data = new FormData(form);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
};
xhttp.open("POST", "<YOUR-URL>", true);
xhttp.send(data);
}
Here's a slightly modified version of TibTibs':
function serialize(form) {
var field, s = [];
if (typeof form == 'object' && form.nodeName == "FORM") {
var len = form.elements.length;
for (i=0; i<len; i++) {
field = form.elements[i];
if (field.name && !field.disabled && field.type != 'file' && field.type != 'reset' && field.type != 'submit' && field.type != 'button') {
if (field.type == 'select-multiple') {
for (j=form.elements[i].options.length-1; j>=0; j--) {
if(field.options[j].selected)
s[s.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.options[j].value);
}
} else if ((field.type != 'checkbox' && field.type != 'radio') || field.checked) {
s[s.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value);
}
}
}
}
return s.join('&').replace(/%20/g, '+');
}
Disabled fields are discarded and names are also URL encoded. Regex replace of %20 characters takes place only once, before returning the string.
The query string is in identical form to the result from jQuery's $.serialize() method.
For debugging purposes this might help you:
function print_form_data(form) {
const form_data = new FormData(form);
for (const item of form_data.entries()) {
console.log(item);
}
return false;
}
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 'tel':
case 'email':
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;
}
break;
case 'file':
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("&");
}
Source: http://code.google.com/p/form-serialize/source/browse/trunk/serialize-0.1.js
// supports IE8 and IE9
function serialize(form) {
var inputs = form.elements;
var array = [];
for(i=0; i < inputs.length; i++) {
var inputNameValue = inputs[i].name + '=' + inputs[i].value;
array.push(inputNameValue);
}
return array.join('&');
}
//using the serialize function written above
var form = document.getElementById("form");//get the id of your form. i am assuming the id to be named form.
var form_data = serialize(form);
var xhr = new XMLHttpRequest();
xhr.send(form_data);
//does not work with IE8 AND IE9
var form = document.querySelector('form');
var data = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.send(data);
HTMLElement.prototype.serialize = function(){
var obj = {};
var elements = this.querySelectorAll( "input, select, textarea" );
for( var i = 0; i < elements.length; ++i ) {
var element = elements[i];
var name = element.name;
var value = element.value;
if( name ) {
obj[ name ] = value;
}
}
return JSON.stringify( obj );
}
To use like this:
var dataToSend = document.querySelector("form").serialize();
I hope I have helped.
Works in all browsers.
const formSerialize = formElement => {_x000D_
const values = {};_x000D_
const inputs = formElement.elements;_x000D_
_x000D_
for (let i = 0; i < inputs.length; i++) {_x000D_
values[inputs[i].name] = inputs[i].value;_x000D_
}_x000D_
return values;_x000D_
}_x000D_
_x000D_
const dumpValues = form => () => {_x000D_
_x000D_
const r = formSerialize(form);_x000D_
console.log(r);_x000D_
console.log(JSON.stringify(r));_x000D_
}_x000D_
_x000D_
const form = document.querySelector('form');_x000D_
_x000D_
dumpValues(form)();_x000D_
_x000D_
form.addEventListener('change',dumpValues(form));
_x000D_
<form action="/my-handling-form-page" method="post">_x000D_
<div>_x000D_
<label for="name">Name:</label>_x000D_
<input type="text" id="name" name="user_name" value="John">_x000D_
</div>_x000D_
<div>_x000D_
<label for="mail">E-mail:</label>_x000D_
<input type="email" id="mail" name="user_mail" value="[email protected]">_x000D_
</div>_x000D_
<div>_x000D_
<label for="interests">Interest:</label>_x000D_
<select required="" id="interests" name="interests">_x000D_
<option value="" selected="selected">- None -</option>_x000D_
<option value="drums">Drums</option>_x000D_
<option value="js">Javascript</option>_x000D_
<option value="sports">Sports</option>_x000D_
<option value="trekking">Trekking</option>_x000D_
</select>_x000D_
</div>_x000D_
<div>_x000D_
<label for="msg">Message:</label>_x000D_
<textarea id="msg" name="user_message">Hello My Friend</textarea>_x000D_
</div>_x000D_
</form>
_x000D_
I hope this will work
var serializeForm = (formElement) => {
const formData = {};
const inputs = formElement.elements;
for (let i = 0; i < inputs.length; i++) {
if(inputs[i].name!=="")
formData[inputs[i].name] = inputs[i].value;
}
return formData;
}
This could be done by very simple function as follows
function serialize(form) {
let requestArray = [];
form.querySelectorAll('[name]').forEach((elem) => {
requestArray.push(elem.name + '=' + elem.value);
});
if(requestArray.length > 0)
return requestArray.join('&');
else
return false;
}
serialized = serialize(document.querySelector('form'))
console.log(serialized);
_x000D_
<form>
<input type='text' name='fname' value='Johne'/>
<input type='text' name='lname' value='Doe'/>
<input type='text' name='contact[]' value='99999999'/>
<input type='text' name='contact[]' value='34423434345'/>
</form>
_x000D_
I started with the answer from Johndave Decano.
This should fix a few of the issues mentioned in replies to his function.
Button types will still be ignored if they don't have a name value.
function serialize(form, evt){
var evt = evt || window.event;
evt.target = evt.target || evt.srcElement || null;
var field, query='';
if(typeof form == 'object' && form.nodeName == "FORM"){
for(i=form.elements.length-1; i>=0; i--){
field = form.elements[i];
if(field.name && field.type != 'file' && field.type != 'reset'){
if(field.type == 'select-multiple'){
for(j=form.elements[i].options.length-1; j>=0; j--){
if(field.options[j].selected){
query += '&' + field.name + "=" + encodeURIComponent(field.options[j].value).replace(/%20/g,'+');
}
}
}
else{
if((field.type != 'submit' && field.type != 'button') || evt.target == field){
if((field.type != 'checkbox' && field.type != 'radio') || field.checked){
query += '&' + field.name + "=" + encodeURIComponent(field.value).replace(/%20/g,'+');
}
}
}
}
}
}
return query.substr(1);
}
This is how I am currently using this function.
<form onsubmit="myAjax('http://example.com/services/email.php', 'POST', serialize(this, event))">
Here is pure JavaScript approach:
var form = document.querySelector('form');
var data = new FormData(form);
var req = new XMLHttpRequest();
req.send(data);
Though it seems to be working only for POST requests.
Using JavaScript reduce function should do a trick for all browsers, including IE9 >:
Array.prototype.slice.call(form.elements) // convert form elements to array
.reduce(function(acc,cur){ // reduce
var o = {type : cur.type, name : cur.name, value : cur.value}; // get needed keys
if(['checkbox','radio'].indexOf(cur.type) !==-1){
o.checked = cur.checked;
} else if(cur.type === 'select-multiple'){
o.value=[];
for(i=0;i<cur.length;i++){
o.value.push({
value : cur.options[i].value,
selected : cur.options[i].selected
});
}
}
acc.push(o);
return acc;
},[]);
Live example bellow.
var _formId = document.getElementById('formId'),_x000D_
formData = Array.prototype.slice.call(_formId.elements).reduce(function(acc,cur,indx,arr){_x000D_
var i,o = {type : cur.type, name : cur.name, value : cur.value};_x000D_
if(['checkbox','radio'].indexOf(cur.type) !==-1){_x000D_
o.checked = cur.checked;_x000D_
} else if(cur.type === 'select-multiple'){_x000D_
o.value=[];_x000D_
for(i=0;i<cur.length;i++){_x000D_
o.value.push({_x000D_
value : cur.options[i].value,_x000D_
selected : cur.options[i].selected_x000D_
});_x000D_
}_x000D_
}_x000D_
acc.push(o);_x000D_
return acc;_x000D_
},[]);_x000D_
_x000D_
// view_x000D_
document.getElementById('formOutput').innerHTML = JSON.stringify(formData, null, 4);
_x000D_
<form id="formId">_x000D_
<input type="text" name="texttype" value="some text">_x000D_
<select>_x000D_
<option value="Opt 1">Opt 1</option>_x000D_
<option value="Opt 2" selected>Opt 2</option>_x000D_
<option value="Opt 3">Opt 3</option>_x000D_
</select>_x000D_
<input type="checkbox" name="checkboxtype" value="Checkbox 1" checked> Checkbox 1_x000D_
<input type="checkbox" name="checkboxtype" value="Checkbox 2"> Checkbox 2_x000D_
<input type="radio" name="radiotype" value="Radio Btn 1"> Radio Btn 1_x000D_
<input type="radio" name="radiotype" value="Radio Btn 2" checked> Radio Btn 2_x000D_
<select multiple>_x000D_
<option value="Multi 1" selected>Multi 1</option>_x000D_
<option value="Multi 2">Saab</option>_x000D_
<option value="Multi 3" selected>Multi 3</option>_x000D_
</select>_x000D_
</form>_x000D_
<pre><code id="formOutput"></code></pre>
_x000D_
If you need to submit form "myForm" using POST in json format you can do:
const formEntries = new FormData(myForm).entries();
const json = Object.assign(...Array.from(formEntries, ([x,y]) => ({[x]:y})));
fetch('/api/foo', {
method: 'POST',
body: JSON.stringify(json)
});
The second line converts from an array like:
[["firstProp", "firstValue"], ["secondProp", "secondValue"], ...and so on... ]
...into a regular object, like:
{"firstProp": "firstValue", "secondProp": "secondValue", ...and so on ... }
...it does this conversion by passing in a mapFn into Array.from(). This mapFn is applied to each ["a","b"] pair and converts them into {"a": "b"} so that the array contains a lot of object with only one property in each. The mapFn is using "destructuring" to get names of the first and second parts of the pair, and it is also using an ES6 "ComputedPropertyName" to set the property name in the object returned by the mapFn (this is why is says "[x]: something" rather than just "x: something".
All of these single property objects are then passed into arguments of the Object.assign() function which merges all the single property objects into a single object that has all properties.
Array.from(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from
Destructuring in parameters: https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6/
More on computed property names here: Variable as the property name in a JavaScript object literal?
I've grabbed the entries() method of formData from @moison answer and from MDN it's said that :
The FormData.entries() method returns an iterator allowing to go through all key/value pairs contained in this object. The key of each pair is a USVString object; the value either a USVString, or a Blob.
but the only issue is that mobile browser (android and safari are not supported ) and IE and Safari desktop too
but basically here is my approach :
let theForm = document.getElementById("contact");
theForm.onsubmit = function(event) {
event.preventDefault();
let rawData = new FormData(theForm);
let data = {};
for(let pair of rawData.entries()) {
data[pair[0]] = pair[1];
}
let contactData = JSON.stringify(data);
console.warn(contactData);
//here you can send a post request with content-type :'application.json'
};
the code can be found here
Source: Stackoverflow.com