Javascript 通过单个按钮提交多个表单

我的HTML文件中有这个php代码。我需要使用这些表单更新数据库的表

if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {

    echo '<img class="plan1" id="'.$row["imageID"].'" style="position:absolute; top:'.$row["top"].'px; left:'.$row["left"].'px;" src="'.$row["url"].'" width="'.$row["width"].'" height="'.$row["height"].'" />';

    echo '<form action="saveimage3.php" method="post" id="form1">';
    echo '<input type="hidden" name="planid" value="'.$row["planID"].'"/>';
    echo '<input type="hidden" name="version" value="1'.$row["version"].'"/>';
    echo '<input type="hidden" name="imageid" value="'.$row["imageID"].'"/>';
    echo '<input type="hidden" name="url" value="'.$row["url"].'"/>';

    echo '<input type="hidden" name="left" id="l'.$row["imageID"].'" value="'.$row["left"].'"/>';
    echo '<input type="hidden" name="top" id="t'.$row["imageID"].'" value="'.$row["top"].'"/>';
    echo '<input type="hidden" name="width" id="w'.$row["imageID"].'" value="'.$row["width"].'"/>';
    echo '<input type="hidden" name="height" id="h'.$row["imageID"].'" value="'.$row["height"].'"/>';
    echo '</form>';
}
}

if（$result->num\u rows>0）{
而（$row=$result->fetch_assoc（））{
回声'；
回声'；
回声'；
回声'；
回声'；
回声'；
回声'；
回声'；
回声'；
回声'；
回声'；
}
}

这将根据来自数据库的数据创建多个表单

我有这个ajax代码将所有表单提交到php文件

<script>
        function validate(form){
        //get form id
        var  formID = form.id;
        var formDetails = $('#'+formID);
            $.ajax({
                type: "POST",
                url: 'saveimage3.php',
                data: formDetails.serialize(),
                success: function (data) {  
                    // log result
                    console.log(data);
                    //for closing popup
                      location.reload();
                    window.close()
                },
                error: function(jqXHR, text, error){
                // Displaying if there are any errors
                console.log(error);
                }
            });
        return false;
    }
        //this function will create loop for all forms in page
        function submitAll(){
                for(var i=0, n=document.forms.length; i<n; i++){
                    validate(document.forms[i]);
                }
            }
</script>

函数验证（表单）{
//获取表单id
var formID=form.id；
var formDetails=$（“#”+formID）；
$.ajax({
类型：“POST”，
url:'saveimage3.php'，
数据：formDetails.serialize（），
成功：函数（数据）{
//日志结果
控制台日志（数据）；
//用于关闭弹出窗口
location.reload（）；
window.close（）
},
错误：函数（jqXHR、文本、错误）{
//显示是否存在任何错误
console.log（错误）；
}
});
返回false；
}
//此函数将为页面中的所有表单创建循环
函数submitAll（）{
对于（var i=0，n=document.forms.length；iJavascript）。在每个表单中创建一个隐藏的提交字段，然后当实际的提交按钮被单击时，使其触发一个事件，要求浏览器像所有提交按钮都被单击一样操作

为此，我将使用JQuery.trigger（）事件

因此，如果您有一个id为“submit all”的实际提交按钮和一个类为“submit button”的隐藏提交按钮，那么您可以使用以下JQuery：

$(document).ready(function() {

    $('#submit-all').click(function(){

        $('.submit-button').trigger("click");

    });
});

在
while
循环中，每个表单都具有相同的
id=“form1”
。这不仅是无效的HTML，而且会导致您只提交一个表单的问题。
增加表单ID，然后只需在JS中执行以下操作：

$('#submitAll').click(function(){
    $('[id*="form"]').submit();
});

可能是因为location.reload（）；
您从第一个表单处理程序获得答案，页面重新加载并中断验证循环，所以其他表单不会被发布？

和-您需要将表单id更改为唯一的！
而不是

var formDetails = $('#'+formID);

试一试

我不知道这是否足以修复你的bug。试试吧

您的参数中已经有了表单，只需像我一样将其包装到jQuery集合中即可

另外，为所有表单提供不同的id，以防万一。
我解决了这个问题。出现这个问题是因为每个表单都有相同的id。通过一个增量变量，我将表单id更改为一个到一个。然后问题解决了。非常感谢所有试图帮助我的人。
我尝试过。但现在它只发送了最后一个表单data到php文件我尝试了这一点，但什么都没有发生。我可能需要在其他地方进行更改吗？您尝试了什么？您是否更改了php文件中的表单ID？您是对的。应该只允许在所有ajax请求完成时才进行重新加载，而不是在第一个请求完成后。但是，修复此问题不足以使最重要的一行代码是
var formDetails=$（'#'+formID）；
这行代码会导致validate（）函数始终发送第一个表单的数据，无论发生什么。这不是问题，因为它的工作方式-签出->其他问题是相同的id在小提琴中，我更改为不同。如果每次表单的相同id仅从第一个表单中获取数据，而该id不是问题，因为它的工作方式-签出it out->另一个问题是，如果您更改为unique id，FIDLE中的identic id
s会记录两个表单输入，但如果它们相同，则总是从具有相同id的第一个表单获取输入数据。在我看来，他应该使用unique form id并替换
var formID=form.id；var formDetails=$（'#'+formID）
使用
var formDetails=$（form）；
重新查询参数中已有的元素是非常糟糕的。不过，使用唯一的表单ID应该足以使其工作。我仍然建议修复location.reload（）问题。@user2646988关于重新查询，您是对的，但它可以工作：）
var formDetails = $('#'+formID);

var formDetails = $(form);