Question

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

我在创建在线调查的人离开后立即接听。她完成的方式是这样的：

＆＃13;

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

＆＃13;

我必须把东西存放在一个数据库中，这就是事情开始让我感到困惑的地方。我已经在网上完成了研究，我确信不是让每个页面/表单都是JS中的函数（Q2，Q3等），最好让每个页面都是自己的HTML表单并将数据发送到PHP文件，在那里连接并将数据存储到数据库中。

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

这是我创建的一些测试代码（目前在同一页面上显示两个表单，这不是我想要的）：

＆＃13;

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

＆＃13;

提前谢谢！

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 个答案: