一键提交多个表单（动态创建），每个表单可以单独提交

Question

我将尝试解释我的网站结构，然后解释问题。

• 我有一个元素列表，每个元素都有一个数组。
• 我为数组的每个元素创建了一个表单，因为每个元素都可以单独修改，每个表单都有一个保存按钮。
• 我需要创建一个“全部保存”按钮，允许用户填写所有表单并保存所有元素。

我在这一点上，我尝试了一些其他的东西，但没有奏效，比如嵌套表单：

button.btn.btn-warning(type='button' name='GCTTested' id='GCTTested' value='UpdateGctStatus' onclick="submitGlbForm('"+formList+"')") Save All

• formList 是一个包含每个元素的 formID 的数组

函数submitGlbForm，对于每一个formID我调用submitForm函数：

function submitGlbForm(array){
    array = array.split(',')
    for(i=0; i<array.length; i++){
        //console.log("SubmitGlbForm: "+array[i])
        submitForm(array[i])
    };  
}


function submitForm(value){
    //console.log("SubmitForm: "+value)
    var frm = document.getElementById(value);
    //console.log("Form: "+frm)
    //console.log("Form: "+$('#'+value).serialize())
    //console.log("Ajax submit action: "+$('#'+value).attr('action'))
    frm.submit(function(e) {
        e.preventDefault();
        $.ajax({
            type:'POST',
            url:$('#'+value).attr('action'),
            data: $('#'+value).serialize(),
            success: function(data) {
                alert('Save successful');
                //alert(data);
            },
            error: function (data) {
                alert('Error.');
                //alert(data);
            }
        });
    });
}

问题是只提交了一个表单。正是最后一个。

谁能帮我找出为什么只提交一个表单或给我另一种方法来做到这一点？

谢谢，

Answer 1

submit — a button or attribute of button type that tells the browser to take action on the form (typically to send it to a server).

function submitForm(value){
//console.log("SubmitForm: "+value)
var frm = document.getElementById(value);
//console.log("Form: "+frm)
//console.log("Form: "+$('#'+value).serialize())
//console.log("Ajax submit action: "+$('#'+value).attr('action'))
 $.ajax({
        type:'POST',
        async:false,
        url:$('#'+value).attr('action'),
        data: $('#'+value).serialize(),
        success: function(data) {
            alert('Save successful');
            //alert(data);
        },
        error: function (data) {
            alert('Error.');
            //alert(data);
        }
    });
}

根据我的说法，如果一切正常，那么您的可能应该是这样的。无需在提交表单中编写 ajax。

您可以直接迭代并发送异步请求。循环的执行速度比 ajax 快，所以最后一个请求总是在循环内触发。您可以使用延迟承诺来实现上述功能。访问link。