使用jQuery将表单数据转换为JavaScript对象

如何将表单的所有元素转换为JavaScript对象？

我希望有某种方法从表单自动构建JavaScript对象，而不必遍历每个元素。我不希望使用$（'#formid'）.serialize（）；返回的字符串；，我也不希望$（'#formid'）.serializeArray（）返回映射；

当前回答

我编写了一个jQuery模块jsForm，即使对于非常复杂的表单（也允许集合和其他更复杂的结构），它也可以实现这种双向。

它使用字段的名称（加上一些用于集合的特殊类）并匹配JSON对象。它允许自动复制用于收集和数据处理的DOM元素：

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="https://raw.github.com/corinis/jsForm/master/src/jquery.jsForm.js"></script>
        <script>
        $(function(){
            // Some JSON data
            var jsonData = {
                name: "TestName",   // Standard inputs
                description: "long Description\nMultiline", // Textarea
                links: [{href:'http://stackoverflow.com',description:'StackOverflow'}, {href:'http://www.github.com', description:'GitHub'}],   // Lists
                active: true,   // Checkbox
                state: "VISIBLE"    // Selects (enums)
            };

            // Initialize the form, prefix is optional and defaults to data
            $("#details").jsForm({
                data:jsonData
            });

            $("#show").click(function() {
                // Show the JSON data
                alert(JSON.stringify($("#details").jsForm("get"), null, " "));
            });
        });
        </script>
    </head>
    <body>
        <h1>Simpel Form Test</h1>
        <div id="details">
            Name: <input name="data.name"/><br/>
            <input type="checkbox" name="data.active"/> active<br/>
            <textarea name="data.description"></textarea><br/>
            <select name="data.state">
                <option value="VISIBLE">visible</option>
                <option value="IMPORTANT">important</option>
                <option value="HIDDEN">hidden</option>
            </select>
            <fieldset>
                <legend>Links</legend>
                <ul class="collection" data-field="data.links">
                    <li><span class="field">links.description</span> Link: <input name="links.href"/> <button class="delete">x</button></li>
                </ul>
            </fieldset>
            <button class="add" data-field="data.links">add a link</button><br/>
            Additional field: <input name="data.addedField"/>
        </div>
        <button id="show">Show Object</button>
    </body>
</html>

2013-10-06 07:53:38

其他回答

所有这些答案对我来说似乎都太过头了。为了简单起见，有些话要说。只要您的所有表单输入都设置了name属性，这应该只适用于jimdandy。

$（'form.myform'）.submit（函数（）{var$this=$（this），viewArr=$this.serializeArray（），视图=｛｝；for（viewArr中的var i）{view[viewArr[i].name]=viewArr[i].value；}//在这里使用视图对象（例如JSON.stringify？）});

2011-03-31 21:45:50

在不检查每个元素的情况下，确实无法做到这一点。您真正想知道的是“是否有其他人已经编写了一个将表单转换为JSON对象的方法？”类似于下面的内容应该可以工作——请注意，它只会为您提供通过POST返回的表单元素（必须有名称）。这是未测试的。

function formToJSON( selector )
{
     var form = {};
     $(selector).find(':input[name]:enabled').each( function() {
         var self = $(this);
         var name = self.attr('name');
         if (form[name]) {
            form[name] = form[name] + ',' + self.val();
         }
         else {
            form[name] = self.val();
         }
     });

     return form;
}

2009-07-26 14:01:00

对于语义ui/formantic ui，有一个内置的行为get值：

const fields = $("#myForm.ui.form").form('get values');
const jsonStr = JSON.stringify(fields);

看见https://fomantic-ui.com/behaviors/form.html#/settings

get-values（标识符）返回与标识符数组匹配的元素值的对象。如果未通过IDS，将返回所有字段

2022-11-21 08:25:40

您可以这样做：

var frm = $(document.myform);
var data = JSON.stringify(frm.serializeArray());

请参见JSON。

2014-04-07 10:40:06

这和你想要的完全一样

仅执行以下代码一次

$.fn.serializeObject = function(){
    let d={};
    $(this).serializeArray().forEach(r=>d[r.name]=r.value);
    return d;
}

现在您可以多次执行以下行

let formObj = $('#myForm').serializeObject();
// will return like {id:"1", username:"abc"}

2022-10-21 13:48:31

使用jQuery将表单数据转换为JavaScript对象

推荐文章

最新文章

标签