Question

我submitting multiple forms点击single button。

例如假设我有两种形式。点击按钮，我可以看到$('form[id^=buyerForm]').length gives 2.

first iteration选择first form data并拨打ajax电话，但second iteration也是picks the first form data。 This is the problem.

任何人都可以解释为什么迭代总是选择第一个表单数据？

<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>

并且我按以下方式添加multiple forms

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

Answer 1

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

                       // check if the file is readonly.
                       FileInfo f = new FileInfo(fullName);
                       bool isReadOnly = f.IsReadOnly;
                       f.IsReadOnly = false;

                        string[] nonpublicCachedDataMembers = null;

                        bool runAsLocal = !(ApplicationDeployment.IsNetworkDeployed);

                        ServerDocument.AddCustomization(fullName,
                                                        assemblyLocation,
                                                        SolutionID,
                                                        codeBaseEnv,
                                                        runAsLocal,
                                                        out nonpublicCachedDataMembers);

                        f.IsReadOnly = isReadOnly;

或将所有ID更改为类

bool animationClipPlaying = false;
void Update()
{
     if (GetComponent<Animation>().IsPlaying(clipNameCompare))
     {
         //as animation start to play true the bool
         animationClipPlaying = true; //true this for comparsion
     }
     //if animation is not playing and the bool is true then, animation finished
     else if (!GetComponent<Animation>().IsPlaying(clipNameCompare) && animationClipPlaying)
     {
         Debug.Log(clipNameCompare : " has finished");
         //False so that this condition run only once
         aanimationClipPlaying = false; 
     }
}

或：

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

Answer 2

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

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

    });
});

通过Ajax单击提交多个表单

2 个答案: