使用 PHP 从 HTML 中的单独表单上传数据

Question

我创建了三个单独的表单，并为每个表单指定了一个 ID。用户按下下一个后，当前表单淡出，第二个表单淡入。用户再次按下下一个后，第二个表单淡出，下一个表单淡入。在第三个表单中，我包含一个应该提交的提交按钮我所有的数据到我的数据库。

我在通过三种不同的表单传递信息时遇到问题，想知道是否有人对我如何更轻松地完成此任务有任何想法。

示例代码：

<form id ="1">
<input type = "text"/>
</form>
<form id = "2">
<input type="checkbox"/>
</form>
<form id = "3" action ="upload.php">
<input type = "file">
<input type = "submit">
</form>

EDIT* 添加更多信息：一旦用户按下提交，从表单 1 和表单 2 传入的信息都应该发布到 upload.php 中。到目前为止，我不确定如何做到这一点。

Answer 1

您可以使用如下的单一表单来解决此问题。

<form id ="1" action ="upload.php">
<div class="first-form">
<input type = "text"/>
</div>
<div class="second-form">
<input type="checkbox"/>
</div>
<div class="third-form">
<input type = "file">
<input type = "submit">
</div>
</form>

有三个不同类的 div。您必须隐藏和显示 div 而不是表单。

Answer 2

如果你想在没有 ajax 的情况下使用普通的 php，试试这个。

<form id ="1">
        <input type="text" name="form1" />
    </form>
    <form id = "2">
        <input type="checkbox" name="form2"/>
    </form>
    <form id = "3" action="file.php" method="post">
        <input type = "text" name="form3">
        <input type = "submit" id="sub">
    </form>

脚本

$(document).on("click", "#sub", function () {
    $('#1 :input').not(':submit').clone().hide().appendTo('#3');
    $('#2 :input').not(':submit').clone().hide().appendTo('#3');
    return true;
});

Answer 3

你可以使用jQuery的serialize函数来实现：

您的 html 文件：

<form id="1">
    <input type="text" name="name" />
</form>
<form id="2">
    <input type="checkbox" name="chk" />
</form>
<form id="3">
    <input type="file" name="file">
    <input type="submit">
</form>

添加此脚本（一种 AJAX 方式）：

<script>
$(document).ready(function(){
    $("#3").submit(function(e) {
        e.preventDefault();
        $.ajax({
          type: "POST",
          url: "upload.php",
          data: $('#1, #2, #3').serialize(),
          success: function(res) {
                if(res==="Success"){
                    alert("Success!!!");
                }
            }
        });      
    });
});

</script>

更新

正如@Santosh Patel 所建议的，我也建议将表单内容包含在 div 中。但既然你已经想出了一个设计，我建议你使用 jQuery。