javascript - 一键提交多个表单(动态创建)，每个表单可以单独提交

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。

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