JavaScript: Serialize form

Para poder implementar Ajax y enviar todos los datos de un formulario en una página web se necesita serializar los controles del formulario. En esta función, hecha en javascript, se serializan los controles del tipo input, textarea y select, siempre y cuando tengan en sus atributos los elementos id y name.



Finalmente, los parametros se concatenan como una cadena de querystring con el siguiente formato:



parm1=valor1&parm2=value2&parm3=value3



Este formato es facil de mandar en funciones de Ajax.




Me base en una función de las librerias de prototype pero estaba manejando otras libreryas de dhtmlx para unos calendarios pero se chocaban dos funciones y varias variables que tenian los mismos nombres, asi que en vez de estar corrigiendo el trabajo de otros (que es muuuy extenso) se me hizo mas facil hacer mi propia función copiensela y modifiquenla a su gusto, si tienen una mejor versión avisen!!!!

Mi funcion de serialize form es la siguiente:

 <script>
function serialize(form)
{
    var elements = form.getElementsByTagName('*');
    var i;
    var count = 0;
    var controls = new Array();
    var res='';
    for(i=0;i<elements.length;i++)
    {
        if(elements[i].tagName.toLowerCase()=='input' || elements[i].tagName.toLowerCase()=='select' || elements[i].tagName.toLowerCase()=='textarea')
        {
            if(elements[i] && !elements[i].disabled && elements[i].name.length>0)
            {
                var tmp = '';
                if(elements[i].type=="checkbox" || elements[i].type=="radio")
                {
                    if(elements[i].checked)
                        tmp = elements[i].name + "=" + encodeURIComponent(elements[i].value);
                }
                else
                    tmp = elements[i].name + "=" + encodeURIComponent(elements[i].value);
                if(res=='') res = tmp; else if (res!='' && tmp!='') res = res + "&" + tmp;
            }
        }
    }
    
    return res;
}
function $(element)
{
    return document.getElementById(element);
}
</script>

Un ejemplito básico:

<form name="form1" id="form1" method="post">
 <input type="text" id="control1" name="control1" value="dato1" />
 <input type="text" id="control2" name="control2" value="dato2" />
 <input type="button" onclick="alert(serialize($('form1')))" value="serialize" />
</form>