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

Question

我的 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>';
}
}

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

我有这个 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>

我有这个按钮

<button onclick="submitAll()">Save Version</button>

通过提交这些，数据库仅更新第一个表单数据。其他形式不向 php 文件发送数据。我怎样才能把所有的表格都放到php文件中？？？

Answer 1

可能是因为 location.reload();
您正在从第一个表单处理程序和页面重新加载和中断验证循环中获得答案，因此其他表单不会被发布？
并且 - 您需要将表单 ID 更改为唯一！

Answer 2

Javascript。在每个表单中创建一个隐藏的提交字段，然后在单击实际提交按钮时，使其触发一个事件，要求浏览器像所有提交按钮都已单击一样。

我会为此目的使用 JQuery .trigger() 事件。 http://api.jquery.com/trigger/

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

$(document).ready(function() {

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

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

    });
});

Answer 3

代替

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

试试

var formDetails = $(form);

我不知道这是否足以修复您的错误。试试看吧。

你的论证中已经有了你的形式。只需像我一样将它包装在一个 jQuery 集合中。

另外，为所有表单指定不同的 ID，以防万一。

Answer 4

我解决了。出现问题是因为每个表单都具有相同的 ID。通过一个增量变量，我对表单 id 进行了更改，使其从一个变为一个。然后问题解决了。非常感谢所有试图帮助我的人..！

Answer 5

在您的while 循环中，每个表单都有相同的id="form1"。这不仅是无效的 HTML，还会导致您只提交一个表单的问题。 增加表单ID，然后在JS中简单做：

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