logo标签列表

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

javascriptphpajaxforms
3

我在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文件中？
5个回答
2
也许是因为location.reload();语句，你从第一个表单处理程序中获取了答案，然后页面重新加载并打破了验证循环，所以其他表单无法被提交？ 此外 - 你需要改变表单id使其唯一！
你说得对。刷新应该只在所有ajax请求完成后才允许发生，而不是在第一个请求完成后。然而，修复这个问题并不足以使其正常工作。最重要的一行需要修复的代码是 var formDetails = $('#'+formID); 这行代码会导致validate()函数始终发送第一个表单的数据，无论如何。 - user2187
不是因为他的方式有问题，它也可以工作-请查看-> https://jsfiddle.net/hew39pj4/4/。另一个问题是在fiddle中具有相同的id，我已将其更改为不同的id。如果表单具有相同的id，则每次仅从具有该id的第一个表单中获取数据。 - Edgars Aivars
不是因为他的方式，它也可以工作 - 请查看-> https://jsfiddle.net/hew39pj4/4/。另一个问题是在fiddle中具有相同的ID，如果您更改为唯一的ID，则会记录两个表单输入，但如果它们始终相同，则始终从具有相同ID的第一个表单中获取输入数据。 - Edgars Aivars
我认为他应该同时使用唯一的表单ID，并将var formID = form.id; var formDetails = $('#'+formID);替换为var formDetails = $(form);。如果您已经在参数中拥有它，重新查询元素是相当糟糕的。然而，使用唯一的表单ID应该足以让它正常工作。我仍然建议解决location.reload()问题。 - user2187
@user2646988，你说得没错，但它确实有效 :) - Edgars Aivars
1

我解决了它。问题出现在每个表单都有相同的id。通过一个递增的变量，我改变了表单id，使其从一个变为另一个。然后问题得到了解决。非常感谢每个试图帮助我的人..！

1
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");

    });
});
我尝试过了，但现在它只发送最后一个表单数据到 PHP 文件。 - Dean Johns
1

代替 

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

尝试

var formDetails = $(form);

我不确定这是否足以修复您的错误。只需尝试一下。
您已经在参数中拥有了表单。只需像我一样将其包装在jQuery集合中即可。
此外，请为所有表单提供不同的ID，以防万一。
0
在你的while循环中，每个表单都有相同的id="form1"。这不仅是无效的HTML，而且还导致只提交一个表单的问题。 增加表单ID，然后在JS中简单地执行以下操作：
$('#submitAll').click(function(){
    $('[id*="form"]').submit();
});
我尝试了这个，但什么也没发生。也许我需要在其他地方做出改变？ - Dean Johns
你尝试了什么？你在 PHP 文件中更改了表单 ID 吗？ - Marc Anton Dahmen
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接