从动态创建的表单字段集中读取数据

时间:2015-03-26 12:41:17

标签: jquery asp.net asp.net-mvc

我正在使用ASP.NET MVC并尝试使用jQuery从动态创建的表单字段集中读取数据。我用来生成字段的代码如下(这只是一个测试样本而不是完整的MVC视图):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> Dynamically create input fields- jQuery </title>
    <script src="/Scripts/jquery-2.1.3.js"></script>
</head>
<body>
    <form>
        <div id="itemRows">
            Item quantity: <input type="text" name="add_qty" size="4" />
            Item name: <input type="text" name="add_name" />
            <input onclick="addRow(this.form);" type="button" value="Add row" />
        </div>
    </form>
    <script type="text/javascript">
        var rowNum = 0;
        function addRow(frm) {
            rowNum++;
            var row = '<p id="rowNum' + rowNum + '">Item quantity: <input type="text" name="qty[]" size="4" value="' + frm.add_qty.value + '"> Item name: <input type="text" name="name[]" value="' + frm.add_name.value + '"> <input type="button" value="Remove" onclick="removeRow(' + rowNum + ');"></p>';
            jQuery('#itemRows').append(row);
            frm.add_qty.value = '';
            frm.add_name.value = '';
        }
        function removeRow(rnum) {
            jQuery('#rowNum' + rnum).remove();
        }
    </script>
</body>
</html>

我只是没有得到关于如何阅读添加的字段的概念,并且视图源没有帮助。

2 个答案:

答案 0 :(得分:0)

如果您要将form数据序列化为 JSON ,您只需序列化完整form,然后在 JSON 对象中找到您添加的字段:

 var form = $('form'); //care if you have multiple forms on your page
 var formData = JSON.stringify(form.serializeArray());

现在formData变量包含表单中的所有输入。如果你有很多输入 - 你得到一个阵列。

答案 1 :(得分:0)

实际上,我想通过在ID的末尾添加索引值将在for循环中工作并获得索引的最大值,只需引用rowNum。问题解决了。