一个按钮提交多个表单(动态创建)，每个表单可以单独提交 [英] Submit multiple forms (dynamicly created) with one button, each form can be submited individually

问题描述

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

I'll try to explain the structure of my website and then the problem.

• 我有一个元素列表，每个元素都有一个数组.
• 我为数组的每个元素创建了一个表单，因为每个元素都可以单独修改，并且每个表单都有按钮保存.
• 我需要创建一个保存所有"按钮，以便用户填写所有表单并保存所有元素.

我在这一点上，我尝试了其他一些方法，但是没有起作用，例如嵌套表单:

I'm at this point, I tried some other things, but didn't work, like nested forms:

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

• formList是具有每个元素的formID的数组

函数submitGlbForm，对于每个formID，我称之为submitForm函数:

The function submitGlbForm, for each formID I call the submitForm function:

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);
            }
        });
    });
}

问题在于仅提交一种表单.恰好是最后一个.

The problem is that only one form is submited. Exactly the last one.

有人可以帮助我找到为什么只提交一种表格或给我另一种方法吗?

Can anyone help me to find why only one form is submited or giving me another approach to do this?

谢谢

推荐答案

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.

according to me if everything is right then your could should be something like this. there is no need of writing a ajax inside a submit form .

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

you can directly iterate and send async request. loop is executing faster than ajax so always last reques is firing inside a loop. you can achieve above functionality using deferred promise. visit a link.

这篇关于一个按钮提交多个表单(动态创建)，每个表单可以单独提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！