JavaScript: serializzare un form senza jQuery

Serializzare un form senza jQuery richiede soltanto un ciclo attraverso tutti gli elementi del form di destinazione e l'assemblaggio di una stringa contenente coppie formate dal nome del campo e dal suo valore e unite insieme dal canonico separatore &. Ovviamente il valore di ciascun campo deve essere codificato tramite la funzione encodeURIComponent(). Vediamo insieme la nostra soluzione.

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 + '=' + encodeURIComponent(value);
      
      serialized.push(str);
      
      break;
      
      default:
      
      
        break;
        
    }    
  
  }
  
  return serialized.join('&');

}

Usiamo la collezione elements (DOM Level 0) per poter eseguire il nostro ciclo attraverso tutti gli elementi contenuti nel form. Quindi, in base al loro attributo type, selezioniamo solo gli input di testo, i radio, i checkbox, i select e le aree di testo (ovviamente potete aggiungere altri tipi di campi). La stringa viene assemblata generando prima un array contenente come valori le coppie costituite dall'attributo name e value di ciascun campo. Quindi l'array viene trasformato in stringa usando join() e il separatore &. Esempio:

window.onload = function() {

  var form = document.forms[0];
  
  form.onsubmit = function() {
    
    var serializedString = serializeForm('test');
    var div = document.createElement('div');
    div.appendChild(document.createTextNode(serializedString));
    
    form.appendChild(div);
    
    return false;
  
    
  };

};

Potete visionare l'esempio finale in questa pagina.