jquery将表单中的数据收集到多个对象中

时间:2015-02-17 23:46:19

标签: javascript jquery arrays json forms

我不完全确定如何做到这一点。

但是我有一个表单,其中包含一些包含多个输入的div,textareas。我想将它们收集到一个多维数组中。有点像这样:

{
    "jason" : {
        "name" : "Jason Lengstorf",
        "age" : "24",
        "gender" : "male"
    },
    "kyle" : {
        "name" : "Kyle Lengstorf",
        "age" : "21",
        "gender" : "male"
    }
}

但我不完全确定如何做到这一点,谷歌没有帮助。 我的HTML看起来像这样

<form class="testForm" method="POST">

    <div class="uploadForm">
        <input class="uploadedFile" name="form1[]name[]" type="text" value="myname" />
        <input class="uploadedFile" name="form1[]phone[]" type="text" value="2019192" />
        <input class="uploadedFile" name="form1[]text[]" type="text" value="sometext" />
    </div>

    <div class="uploadForm">
        <input class="uploadedFile" name="form2[]name[]" type="text" value="myname" />
        <input class="uploadedFile" name="form2[]phone[]" type="text" value="2019192" />
        <input class="uploadedFile" name="form2[]text[]" type="text" value="sometext" />
    </div>


    <button>save</button>
</form>

和收集脚本

<script>
    $( document ).ready(function() {

        $(".testForm").submit(function(e) {
        e.preventDefault();


        var $form = $(this);

        var $inputs = $form.find("input, select, button, textarea");

        var serializedData = $form.serializeArray();
        $inputs.prop("disabled", true);

        alert(JSON.stringify(serializedData));

        })

    });
</script>

2 个答案:

答案 0 :(得分:0)

SerializeJSON非常适合您在此处尝试实现的目标。

https://github.com/marioizquierdo/jquery.serializeJSON

答案 1 :(得分:0)

首先,我会尝试使用ID <form class="testForm" method="POST" id="testForm">

然后使用:

var formData = JSON.stringify($("#testForm").serializeArray());

你将从你的表格中获得一个json