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

Question

我在点击单个按钮时提交多个表单。

例如假设我有两种形式。单击按钮时，我可以看到 $('form[id^=buyerForm]').length 给出 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>

html 我的 html 结构

<div id="jointBuyer" class="JointBuyerDive" style="display:none">
    <div id="jBuyer">
        <div id="inner"class="col-lg-6">
            <form id="buyerForm" role="form" method="POST" enctype="multipart/form-data">
        </div>
    </div>
<div>

并且我正在通过以下方式添加多种形式

<script
    function addBuyer() {
        $("#addBuyer").click(function() {
            $("#buyerForm").clone().appendTo("#jointBuyer");
        });
    }
</script>

Answer 1

永远不要在循环中使用 ids 永远不要:

 $("#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都改成classes

 $("#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);
            }
        });

    });
});