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 = element.name;
    var value = element.value;
    
    switch(type) {
    
      case 'text':
      case 'radio':
      case 'checkbox':
      case 'textarea':
      case 'select-one':
      
      str = name + '=' + value;
      
      serialized.push(str);
      
      break;
      
      default:
      
      
        break;
        
    }    
  
  }
  
  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.

Demo

Live demo