Question

有没有办法将表单转换为基于某种结构化表单的复杂JavaScript对象？

现在，我不知道这是否应该以更好的方式完成，但基本上我想要这样的事情：

<form>
   <input name="Foo" value="1" />
   <input name="Parent.Child1" value="1" />
   <input name="Parent.Child2" value="2" />
</form>

我想在JavaScript中使用它：

var form = GetForm();
var obj = ConvertFormToComplexObject(form);

//
// Followings should be true
// 
// obj.Foo == 1;
// obj.Parent != null
// obj.Parent.Child1 == 1;
// obj.Parent.Child2 == 2;
//

有什么建议吗？

谢谢，

Answer 1

我写了一个插件来做到这一点。希望它会帮助那里的人。如果您发现任何错误，请告诉我。

这是serializeObject.js的代码：

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {

        var arrayIndex = function(name) {
            //note: 2d array not handled

            var startIndex = name.indexOf('[');
            var endIndex = name.indexOf(']');

            if (startIndex == -1 || endIndex == -1 || endIndex != name.length - 1)
                return null;

            return name.substr(startIndex + 1, endIndex - startIndex - 1);
        }

        var trimArrayIndex = function(name) {
            var startIndex = name.indexOf('[');
            return name.substr(0, startIndex);
        }

        var createObject = function(obj, className, value) {
            if (className.length == 0)
                return;

            var classNames = className.split(".");

            if (classNames.length == 1) {

                if (obj[classNames[0]] == null) {
                    obj[classNames[0]] = value;
                }
                else if (obj[classNames[0]] instanceof Array) {
                    obj[classNames[0]].push(value);
                }
                else {
                    var temp = obj[classNames[0]];

                    obj[classNames[0]] = new Array();
                    obj[classNames[0]].push(temp);
                    obj[classNames[0]].push(value);
                }

                return;
            }

            var index = arrayIndex(classNames[0]);
            var isArray = index != null;

            if (!isArray) {
                if (obj[classNames[0]] == null) {
                    obj[classNames[0]] = new Object();
                }

                createObject(obj[classNames[0]], className.substr(classNames[0].length + 1), value);
            }
            else {
                var aryName = trimArrayIndex(classNames[0]);

                if (obj[aryName] == null) {
                    obj[aryName] = new Array();
                }
                else if (!obj[aryName] instanceof Array) {
                    throw "unable to serialize " + aryName + " as an array";
                }

                var ary = obj[aryName];
                var nextObj;

                if (ary[parseInt(index)] == null) {
                    ary[parseInt(index)] = new Object();
                }

                nextObj = ary[parseInt(index)];

                createObject(nextObj, className.substr(classNames[0].length + 1), value);
            }
        }

        createObject(o, this.name, this.value || '');
    });
    return o;
};

$.fn.replaceStarWithIndex = function() {
    var a = this.serializeArray();
    var form = this;


    var arrayIndex = function(name) {
        var startIndex = name.indexOf('[');
        var endIndex = name.indexOf(']');

        if (startIndex == -1 || endIndex == -1) {
            return null;
        }

        return name.substr(startIndex + 1, endIndex - startIndex - 1);
    }

    var trimArrayIndex = function(name) {
        var startIndex = name.indexOf('[');
        return name.substr(0, startIndex);
    }

    for (var key in a) {
        var index = arrayIndex(a[key].name);

        if (index == null || index != "*") {
            continue;
        }

        var count = 0;
        var trimName = trimArrayIndex(a[key].name);

        while (true) {
            var elementName = a[key].name.replace('*', count);
            var element = form[0][elementName];

            if (element == null) {
                $(form[0][a[key].name]).first().attr('name', elementName);
                break;
            }
            count++;
        }
    }
}

以下是测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Test</title>
    <link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
    <script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js" ></script>
    <script type="text/javascript" src="serializeObject.js" ></script>
</head>

<body>

<h1 id="qunit-header">Test serializeObject</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>

<!--Test Form -->

<form id="form1" style="display:none;">
    <input type="text" name="Parent.Child1" value="child1"/>

    <input type="text" name="Parent.Child2" value="child2a"/>
    <input type="text" name="Parent.Child2" value="child2b"/>

    <input type="text" name="Parent.Child3" value="3"/>
    <input type="text" name="Parent.Child3" value="2"/>
    <input type="text" name="Parent.Child3" value="1"/>

    <input type="text" name="Parent.Child4[0].Child1" value="11" />
    <input type="text" name="Parent.Child4[0].Child2" value="aa" />

    <input type="text" name="Parent.Child4[1].Child1" value="22" />
    <input type="text" name="Parent.Child4[1].Child2" value="bb" />



</form>   

<form id="form2" style="display:none;">
    <input type="text" name="Child1[0].Child1" value="0" />
    <input type="text" name="Child1[*].Child1" value="1" />
    <input type="text" name="Child1[*].Child1" value="2" />

    <input type="text" name="Child2[2]" value="2" />
    <input type="text" name="Child2[*]" value="0" />
    <input type="text" name="Child2[*]" value="1" />
</form> 

<script type="text/javascript">
    $(document).ready(function() {
        var obj = $('#form1').serializeObject();

        test("Parent should exist", function() {
            equals(true, obj.Parent != null);
        });

        test("Child1 should exist within parent", function() {
            equals(true, obj.Parent.Child1 != null);
        });

        test("Should create array for items with same name", function() {
            equals("child2a", obj.Parent.Child2[0]);
            equals("child2b", obj.Parent.Child2[1]);
            equals("3", obj.Parent.Child3[0]);
            equals("2", obj.Parent.Child3[1]);
            equals("1", obj.Parent.Child3[2]);
        });


        test("Should allow array of objects", function() {
            equals("11", obj.Parent.Child4[0].Child1);
            equals("aa", obj.Parent.Child4[0].Child2);
            equals("22", obj.Parent.Child4[1].Child1);
            equals("bb", obj.Parent.Child4[1].Child2);
        });

        $('#form2').replaceStarWithIndex();

        test("Should replace * with index", function() {
            equals("0", $('#form2 input[name="Child1[0].Child1"]').val());
            equals("1", $('#form2 input[name="Child1[1].Child1"]').val());
            equals("2", $('#form2 input[name="Child1[2].Child1"]').val());

            equals("0", $('#form2 input[name="Child2[0]"]').val());
            equals("1", $('#form2 input[name="Child2[1]"]').val());
            equals("2", $('#form2 input[name="Child2[2]"]').val());
        });

    });
</script>

</body>
</html>

Answer 2

我猜你要求document.forms [0]

类似的东西：

var form = document.forms [0]; //或者可以是document.getElementByName ...

然后您可以在尝试时访问其值：form.Foo = 1

你不需要将它转换为复杂的对象DOM本身就足够了

Answer 3

var form = document.forms[0];

返回一个HTML元素对象，你可以使用

form.Foo

获取HTML元素

但是如果你想获得价值，必须使用：

form.Foo.value

或

form['Parent.Child1'].value;

你可以看到这个DEMO

P.S。我认为ConvertFormToComplexObject（）方法并不好。你不需要创建它。

Answer 4

它是一个名字[0]非常基本的版本，但它应该让你基本了解这项工作的方式。

$(function(){
    var elements = document.forms[0].elements,
        foo = {};
    for(var i=0; i<elements.length; i++) {
        var element = elements[i];
        var names = element.name.split('.');
        if(names.length >1) {
            foo[names[0]] = foo[names[0]] || {};
            foo[names[0]][names[1]] = element.value;
        } else {
         foo[names[0]] = element.value;
        }

    }
    console.log(foo)
});

Answer 5

许多Javascript库都具有此功能。我建议你使用他们的实现，或者至少看看他们是如何做到的。

原型：http://www.prototypejs.org/api/form/serialize

用法：$('id-of-form').serialize(true)

如何将html表单转换为复杂的JavaScript对象

5 个答案: