[javascript] form serialize javascript (no framework)

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

The answer is


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 fors)

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, '+');
}

For modern browsers only

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()

Everywhere except IE

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()

Example

_x000D_
_x000D_
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_
_x000D_
_x000D_

Compatible with IE 10

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.

_x000D_
_x000D_
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_
_x000D_
_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.

_x000D_
_x000D_
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_
_x000D_
_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

_x000D_
_x000D_
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_
_x000D_
_x000D_


I started with the answer from Johndave Decano.

This should fix a few of the issues mentioned in replies to his function.

  1. Replace %20 with a + symbol.
  2. Submit/Button types will only be submitted if they were clicked to submit the form.
  3. Reset buttons will be ignored.
  4. The code seemed redundant to me since it is doing essentially the same thing regardless of the field types. Not to mention incompatibility with HTML5 field types such as 'tel' and 'email', thus I removed most of the specifics with the switch statements.

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.

https://developer.mozilla.org/en-US/docs/Web/API/FormData


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.

_x000D_
_x000D_
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_
_x000D_
_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


Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to forms

How do I hide the PHP explode delimiter from submitted form results? React - clearing an input value after form submit How to prevent page from reloading after form submit - JQuery Input type number "only numeric value" validation Redirecting to a page after submitting form in HTML Clearing input in vuejs form Cleanest way to reset forms Reactjs - Form input validation No value accessor for form control TypeScript-'s Angular Framework Error - "There is no directive with exportAs set to ngForm"

Examples related to serialization

laravel Unable to prepare route ... for serialization. Uses Closure TypeError: Object of type 'bytes' is not JSON serializable Best way to save a trained model in PyTorch? Convert Dictionary to JSON in Swift Java: JSON -> Protobuf & back conversion Understanding passport serialize deserialize How to generate serial version UID in Intellij Parcelable encountered IOException writing serializable object getactivity() Task not serializable: java.io.NotSerializableException when calling function outside closure only on classes not objects Cannot deserialize the JSON array (e.g. [1,2,3]) into type ' ' because type requires JSON object (e.g. {"name":"value"}) to deserialize correctly