HTML form to JSON without modern libraries

Question

Does anyone know of a simple javascript library that serializes a form DOM object to JSON? I know jQuery has the serialize method but since I am writing an app for IE mobile, I can't use any of the new fancy libraries, must be oldschool simple javascript, as light as possible.

Cheers

Answer 1

Actually you could get all the elements in the form and "serialize" them yourself. You could get all the children of the form and process them. For example, say you have a very simple form:

<form id="my-form">
    <input type="text" name="text1" value="foo" />
</form>

var form = document.getElementById("my-form");
for(var i in form.children)
{
    if(form.children[i].type)
    {
        alert(form.children[i].name + ":" + form.children[i].value);
    }
}

There may be more advanced / efficient solutions, but this should work for simple forms.

Answer 2

This is a very simple code, i'm writing it right now so it's better to test it before:

var form=document.getElementById("myform"); //Your form
var inp=form.getElementsByTagName("input"), 
    sel=form.getElementsByTagName("select"),
    tex=form.getElementsByTagName("textarea");
var i, parts=[];
//Select
for(i=0;i<sel.length;i++)
   if(sel[i].name) parts.push('"'+sel[i].name+'":"'+encodeURIComponent(sel[i].value)+'"');
//Textarea
for(i=0;i<text.length;i++)
   if(tex[i].name) parts.push('"'+tex[i].name+'":"'+encodeURIComponent(tex[i].value)+'"');
//Input
for(i=0;i<inp.length;i++)
{
   if(!inp[i].name) continue;
   if((inp[i].type!="checkbox" && inp[i].type!="radio") || inp[i].checked) parts.push('"'+inp[i].name+'":"'+encodeURIComponent(inp[i].value)+'"');
}

var JSONStr="{"+parts.join(",")+"}";

Anyway this does not handle some cases like multiple selects, disabled or read-only inputs etc...