一个HTML文件（但在多个页面上）中的多种表单

Question

我正在一个项目中，在客户端，用户必须填写在线调查，而在服务器端，数据将存储在数据库中。 调查本身包含多个页面，其中每个页面都是一个表单。 因此，从本质上讲，单个在线调查由多种形式组成。

我要在创建在线调查的人离开的地方接机。 她的完成方式是这样的：

 <!DOCTYPE html> <html> <head><link rel="stylesheet" type="text/css" href="survey.css"> <script> // when the user clicks the button on the first page, he/she is brought to a new page where the stuff inside the function is displayed function Q2(){ document.getElementById("Q").innerHTML = "does something...<button type='button' onclick='Q3()'>Next</button>"; // same deal here, stuff in this function are displayed in a new page function Q3(){ document.getElementById("Q").innerHTML = "does something...<button type='button' onclick='Q4()'>Next</button>"; // same as the two functions above function Q4(){ document.getElementById("Q").innerHTML = "does something...<button type='button' onclick='Q5()'>Next</button>"; // keeps going until the last question </script> </head> <body> <!-- this is the first page when the file is opened --> <h1>Meeting 1</h1> <p id="Q">Some text...<br><input type="text" name="tweet" style='height: 50px;width: 500px;'><br><br> <button type="button" onclick="Q2()">Next</button> </p> </body> </html>

我必须将事物存储在数据库中，这开始使我感到困惑。 我已经在网上进行了研究，我敢肯定，与其让每个页面/表单都成为JS中的函数（Q2，Q3等），不如让每个页面都成为自己的HTML表单并发送数据会更好到一个PHP文件，在该文件中进行连接并将数据存储到数据库。

我要发生的事情：是否可以将所有表单写入/存储在单个HTML文件中，并且同时在下一页上显示每个后续表单？ 如果不可能，我该怎么办？

这是我创建的一些测试代码（当前在同一页面上显示这两种形式，这不是我想要的）：

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”> <head> <link rel="stylesheet" type="text/css" href="survey.css"> </head> <body> <div> <h1>Meeting 1</h1> <form name="form1"> <!-- Some HTML code goes here --> <button type="button">Next</button> </form> </div> <div> <form name="form2"> <!-- Some HTML code goes here --> <button type='button'>Next</button> </form> </div> </body> </html>

先感谢您！

Answer 1

您实际上可以简单地使用jQuery和CSS将所有表单放置在同一位置 ，然后放置在另一个位置。 但是，您必须使用Ajax将表单信息放入数据库中。 这样做：

$(".step1").show();
$(".step2").hide();
$(".step3").hide();

$(".step1").submit(function(e)
{
    e.preventDefault();

    $.ajax({
       url : 'submission1.php',
       data : { name : $(".step1").children("input[name='username']") },
       method : 'POST'
   })
   .done(function(data)
   {
       $(".step2").show();
   });
});

/** Repeat the same process with step 2 and 3 **/

然后，您的CSS可能如下所示： 您的表单必须位于父容器中 ：

.step1
{
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
}

.step2
{
    position: relative;
    top: 0;
    left: 0;
    z-index: 5;
}

.step3
{
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

此处的完整示例： https : //jsfiddle.net/LkjmL43h/3/

一个HTML文件（但在多个页面上）中的多种表单

问题描述

1 个解决方案

解决方案1
0 2015-11-09 20:42:24

一个HTML文件（但在多个页面上）中的多种表单

问题描述

1 个解决方案

解决方案1 0 2015-11-09 20:42:24

解决方案1
0 2015-11-09 20:42:24