Javascript 通过Ajax一次单击提交多个表单

我正在

单击
单个按钮
提交多个表单

假设我有两种形式。点击按钮，我可以看到
$（'form[id^=buyerment]'）。长度为2。

第一次迭代
拾取
第一个表单数据
并进行ajax调用，但是
第二次迭代
也拾取第一个表单数据
<代码>这就是问题所在。

有人能解释一下为什么迭代总是选择第一种形式的数据吗

<script type="text/javascript">
    $("#jPdetails").on('click', function() {
        $('form[id^=buyerForm]').each(function() {
            post_form_data($(this).serialize());
        });
    });

        function post_form_data(data) {
            var jsellerAddress = $("#jsellerAddress").val();
            var jagentId = $("#jagentId").val();
            var jbuilding = $("#jbuilding").val();
            var junitId = $('#junitId option:selected').val();
            var jpropertyAed = $("#jppropertyAed").val();
            var jparkingBaysAt = $("#jparkingBaysAt").val();
            var jtotalAed = $("#jtotalAed").val();
            var dataString =
                'jsellerAddress=' + jsellerAddress +
                '&jagentId=' + jagentId +
                '&jbuilding=' + jbuilding +
                '&junitId=' + junitId +
                '&jpropertyAed=' + jpropertyAed +
                '&jparkingBaysAt=' + jparkingBaysAt +
                '&jtotalAed=' + jtotalAed;
            $.ajax({
                type: 'POST',
                url: 'jointpurchasehandller.php',
                data: dataString,
                success: function(result) {
                    alert(result);
                },
                error: function(error) {
                    alert(error);
                }
            });
        };
</script>

---

永远不要在循环中使用ID永远不要：

 $("#jPdetails").on('click', function() {
        $('form[id^=buyerForm]').each(function(i,v) {
            post_form_data($(v).serialize(),v);
        });
    });

        function post_form_data(data,el) {
            var jsellerAddress = $(el).find("#jsellerAddress").val();
            var jagentId = $(el).find("#jagentId").val();
            var jbuilding = $(el).find("#jbuilding").val();
            var junitId = $(el).find('#junitId option:selected').val();
            var jpropertyAed = $(el).find("#jppropertyAed").val();
            var jparkingBaysAt = $(el).find("#jparkingBaysAt").val();
            var jtotalAed = $(el).find("#jtotalAed").val();
            var dataString =
                'jsellerAddress=' + jsellerAddress +
                '&jagentId=' + jagentId +
                '&jbuilding=' + jbuilding +
                '&junitId=' + junitId +
                '&jpropertyAed=' + jpropertyAed +
                '&jparkingBaysAt=' + jparkingBaysAt +
                '&jtotalAed=' + jtotalAed;
            $.ajax({
                type: 'POST',
                url: 'jointpurchasehandller.php',
                data: dataString,
                success: function(result) {
                    alert(result);
                },
                error: function(error) {
                    alert(error);
                }
            });
        };

或者将所有ID更改为类

 $("#jPdetails").on('click', function() {
        $('.buyerForm').each(function(i,v) {
            post_form_data($(v).serialize(),v);
        });
    });

        function post_form_data(data,el) {
            var jsellerAddress = $(el).find(".jsellerAddress").val();
            var jagentId = $(el).find(".jagentId").val();
            var jbuilding = $(el).find(".jbuilding").val();
            var junitId = $(el).find('.junitId option:selected').val();
            var jpropertyAed = $(el).find(".jppropertyAed").val();
            var jparkingBaysAt = $(el).find(".jparkingBaysAt").val();
            var jtotalAed = $(el).find(".jtotalAed").val();
            var dataString =
                'jsellerAddress=' + jsellerAddress +
                '&jagentId=' + jagentId +
                '&jbuilding=' + jbuilding +
                '&junitId=' + junitId +
                '&jpropertyAed=' + jpropertyAed +
                '&jparkingBaysAt=' + jparkingBaysAt +
                '&jtotalAed=' + jtotalAed;
            $.ajax({
                type: 'POST',
                url: 'jointpurchasehandller.php',
                data: dataString,
                success: function(result) {
                    alert(result);
                },
                error: function(error) {
                    alert(error);
                }
            });
        };

或：

---

我认为您可以将代码大小减少到

$("#jPdetails").on('click', function() {
    $forms=$('form[id^=buyerForm]');
    $($forms).each(function(index) {
        // this will bind corresponding data for each form
        dataString=$($forms[index]).serialize();
        $.ajax({
            type: 'POST',
            url: 'jointpurchasehandller.php',
            data: dataString,
            success: function(result) {
                alert(result);
            },
            error: function(error) {
                alert(error);
            }
        });

    });
});

---

请添加html partID应始终是唯一的这就是为什么您只获取第一个数据，因为其他表单是重复的ID仅使用类而不知道您的答案是否正确？但是你的代码不适合我。你说的“不适合我”是什么意思？你有什么错误，提供html，我说过不要在循环中使用ID吗？哦，非常抱歉。你的解决方案对我有效。我刚重新检查了你们的代码。但你们能不能检查一下这行中的v是什么，以便更好地理解你们的答案。post_form_数据（$（v）.serialize（），v）；v是形式元素谢谢你的帮助。解释得很好。请使用与“jsellerAddress”和“jagentId”相同的字段名。。。如您表格中所列

 $("#jPdetails").on('click', function() {
        $('.buyerForm').each(function(i,v) {
            post_form_data($(v).serialize(),v);
        });
    });

        function post_form_data(data,el) {
            var jsellerAddress = $(el).find(".jsellerAddress").val();
            var jagentId = $(el).find(".jagentId").val();
            var jbuilding = $(el).find(".jbuilding").val();
            var junitId = $(el).find('.junitId option:selected').val();
            var jpropertyAed = $(el).find(".jppropertyAed").val();
            var jparkingBaysAt = $(el).find(".jparkingBaysAt").val();
            var jtotalAed = $(el).find(".jtotalAed").val();
            var dataString =
                'jsellerAddress=' + jsellerAddress +
                '&jagentId=' + jagentId +
                '&jbuilding=' + jbuilding +
                '&junitId=' + junitId +
                '&jpropertyAed=' + jpropertyAed +
                '&jparkingBaysAt=' + jparkingBaysAt +
                '&jtotalAed=' + jtotalAed;
            $.ajax({
                type: 'POST',
                url: 'jointpurchasehandller.php',
                data: dataString,
                success: function(result) {
                    alert(result);
                },
                error: function(error) {
                    alert(error);
                }
            });
        };

$("#jPdetails").on('click', function() {
    $('form[id^=buyerForm]').each(function(i,v) {

        $.ajax({
            type: 'POST',
            url: 'jointpurchasehandller.php',
            data:$(v).serialize(),
            success: function(result) {
                alert(result);
            },
            error: function(error) {
                alert(error);
            }
        });

    });
});

$("#jPdetails").on('click', function() {
    $forms=$('form[id^=buyerForm]');
    $($forms).each(function(index) {
        // this will bind corresponding data for each form
        dataString=$($forms[index]).serialize();
        $.ajax({
            type: 'POST',
            url: 'jointpurchasehandller.php',
            data: dataString,
            success: function(result) {
                alert(result);
            },
            error: function(error) {
                alert(error);
            }
        });

    });
});