Javascript 多个表单，一次点击，发布所有表单的输入？

假设我在一个页面中有多个表单。用户可以逐个提交这些表单。但用户希望通过一个按钮式的phpmyadmin界面发布所有这些表单的输入。如何解决这个问题？

您不能使用普通HTML表单来解决这个问题，但是，您可以使用AJAX解决这个问题，并单独异步提交每个请求。例如，假设您在这里有三种形式：

<form action="url1.php" id="frm1">
  <input type="text" name="username" />
  <input type="text" name="email" />
</form>
<form action="url2.php" id="frm2">
  <input type="text" name="firstname" />
</form>
<form action="url3.php" id="frm3">
  <input type="text" name="username" />
  <input type="text" name="email" />
</form>

---

这应该行得通。。。这至少会让你走上正轨。 使用jQuery：

$("form").submit(function(e){ 

    e.preventDefault();
    e.stopPropagation(); 
    formData = []; 

    $("form").each(function(){

        formData.push($(this).serializeArray());

    });


    $.ajax({

        url: "yourProcessingScript.php", 
        type: "POST",
        data: formData,
        success:function(response){

            alert("Success, probably - ! ");

        } 

     });

});  

---

您可以在没有ajax的情况下实现这一点，但是这有点棘手。将submit按钮放在单独的文件夹中，单击submit按钮即可复制所有表单数据

<?php
    $result = (isset($_POST)) ? $_POST : "";
?>

<!-- Your forms -->
<form action="" method="POST" class="myForm" onsubmit="return false;">
    <input type="text" name="a" />
</form>
<form action="" method="POST" class="myForm" onsubmit="return false;">
    <input type="text" name="b" />
</form>
<form action="" method="POST" class="myForm" onsubmit="return false;">
    <input type="text" name="c" />
</form>
<form action="" method="POST" class="myForm" onsubmit="return false;">
    <input type="text" name="d" />
</form>

<!-- Target form -->
<form action="" method="POST" id="submit-form">
    <input type="submit" id="submit" />
</form>

<pre><?php print_r($result); ?></pre>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#submit").click(function(event) {
            inputs = $(".myForm input");
            inputs.each(function(index) {
                $(inputs[index]).clone(true).appendTo("#submit-form").css("display", "none");
            });
        });
    });
</script>

---

PHPFiddle链接：

提供您迄今为止尝试过的代码。您是否使用ajax发布这些代码？使用ajax是可能的。不是通过普通的表单发布。或者你可以在一个请求中组合所有表单的数据，前提是你的PHP将在服务器端处理所有表单。或者你可以创建隐藏表单并通过Javascript触发它们。否决的原因是什么？否决的不是我。但是我认为，如果您将$this.serialize替换为$'form'。serialize您可以在一个调用中获得所有表单的数据，并避免foreach和不同的调用。然后您可以在服务器端处理所有数据。同意。我只是说，如果我可以选择IMHO，我会在一次调用中将所有内容发布到服务器，然后在服务器端处理不同的表单。而不是不同的电话。但如果您需要将其发送到不同的URL，则was是最好的方法：

<?php
    $result = (isset($_POST)) ? $_POST : "";
?>

<!-- Your forms -->
<form action="" method="POST" class="myForm" onsubmit="return false;">
    <input type="text" name="a" />
</form>
<form action="" method="POST" class="myForm" onsubmit="return false;">
    <input type="text" name="b" />
</form>
<form action="" method="POST" class="myForm" onsubmit="return false;">
    <input type="text" name="c" />
</form>
<form action="" method="POST" class="myForm" onsubmit="return false;">
    <input type="text" name="d" />
</form>

<!-- Target form -->
<form action="" method="POST" id="submit-form">
    <input type="submit" id="submit" />
</form>

<pre><?php print_r($result); ?></pre>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#submit").click(function(event) {
            inputs = $(".myForm input");
            inputs.each(function(index) {
                $(inputs[index]).clone(true).appendTo("#submit-form").css("display", "none");
            });
        });
    });
</script>