Serializing a form without jQuery

Serializing a form without jQuery is not a complex task. All we have to do is to loop through all the elements of a form and select the appropriate ones together with their values. To accomplish this, we'll use the special DOM collection called elements which comes bound to every form. This collection is a relic of the DOM Level-0 era, but it's really handy. Bear in mind that if you want to use the DOM Level-1 approach, you have to call getElementsByTagName() for every element type (input, select and so on), or, alternatively, use childNodes. Let's take a look at our code:

function serializeForm(form) {

  form = document.getElementById(form) || document.forms[0];
  var elems = form.elements;
  var serialized = [], i, len = elems.length, str='';
  for(i = 0; i < len; i += 1) {
    var element = elems[i];
    var type = element.type;
    var name =;
    var value = element.value;
    switch(type) {
      case 'text':
      case 'radio':
      case 'checkbox':
      case 'textarea':
      case 'select-one':
      str = name + '=' + value;
  return serialized.join('&');


We simply fill an array using the name and value properties of each form element. Note that we've used a switch construct on the type property to select only certain form elements. Finally, we turn our array into a string using an ampersand as a glue token. You can see the demo below.


Live demo

Comments are closed.