Javascript 使用PHP从HTML格式的单独表单上载数据

我创建了三个单独的表单，并给每个表单一个id。在用户按下next之后，当前表单淡出，第二个表单淡入。在用户再次按下“下一步”后，第二个表单淡出，下一个表单淡入。在第三个表单中，我包含了一个提交按钮，可以将所有数据提交到数据库

我在通过三种不同的形式传递信息时遇到了问题，我想知道是否有人对我如何更轻松地完成这项工作有任何想法

示例代码：

<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>

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

您可以使用jQuery的函数来实现这一点：

您的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方式）：

$（文档）.ready（函数（）{
$（“#3”）。提交（功能（e）{
e、 预防默认值（）；
$.ajax({
类型：“POST”，
url:“upload.php”，
数据：$（'#1，#2，#3'）。序列化（），
成功：功能（res）{
如果（res==“成功”）{
警惕（“成功！！！”）；
}
}
});      
});
});

更新

---

正如@Santosh Patel所建议的，我也同样建议将表单内容包含在div中。但由于您提出了一种设计，我建议您使用jQuery。

您可以使用如下所示的单个表单来解决此问题

<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，而不是表单。

如果您想在不使用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>

---

你是用jquery来做的吗？fadein和fadeout是用jquery来做的。简单地使用jquery-serialize函数这太棒了。我只是想在我去尝试实现之前再检查一下。在upload.php文件中，我可以轻松地调用$name=$\u POST['name']，和$check=$\u POST['chk']，即使它们来自不同的形式？只是想确保我正确地理解您是的，它与您通常所做的相同我正在查找serialize（）的文档，但找不到有关此问题的任何信息，但是如果我有两个相同的名称属性，会发生什么情况？对于多个控件，使用相同的名称属性是不好的。在这种情况下，第一个值将被第二个值覆盖，尽管这两个值都会过帐。在这种情况下，使用至少一个方括号的名称，使其进入数组-谢谢你解决了我的问题，我也有同样的问题。

<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;
});