如何使用 PHP 向我的数据库提交多步骤表单答案

【问题标题】：How do I submit a multi step form to my database using PHP如何使用 PHP 向我的数据库提交多步骤表单
【发布时间】：2020-09-25 06:33:10
【问题描述】：

我正在尝试使用此链接 (https://www.w3schools.com/howto/howto_js_form_steps.asp) 的多步骤表单构建调查/问卷，但我似乎无法将输入提交到我的数据库。

$connect = new PDO("mysql:host=localhost;dbname=treasure", "root", "");
$message = '';
if(isset($_POST["email"]))
{
 sleep(5);
 $query = "
 INSERT INTO personal_information 
 (fname, lname, age, dob, gender, relationship) VALUES 
 (:fname, :lname, :age, :dob, :gender, :relationship)
 ";

 $user_data = array(
  ':fname'  => $_POST["fname"],
  ':lname'  => $_POST["lname"],
  ':age'   => $_POST["age"],
  ':dob'   => $_POST["dob"],
  ':gender'   => $_POST["gender"],
  ':relationship'   => $_POST["relationship"]

 );
 $statement = $connect->prepare($query);
 if($statement->execute($user_data))
 {
  $message = '
  <div class="alert alert-success">
  Registration Completed Successfully
  </div>
  ';
  header("Location:survey_dashboard.php");
 }
 else
 {
  $message = '
  <div class="alert alert-success">
  There is an error in Registration
  </div>
  ';
 }
}
?>
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
}

#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

h1 {
  text-align: center;  
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #4CAF50;
}
</style>
<body>

<form id="regForm" method="post">
  <div class="text-center mb-4">
    <h1 class="h4 text-gray-900 ">Personal Information</h1>
    <p><center>(Please answer all questions as accuractely and honestly as possibly)</center></p>
  </div>
  <br>
  <!-- One "tab" for each step in the form: -->
  <div class="tab">
  <label> What Is Your Name:</label>
    <p><input placeholder="First name..." oninput="this.className = ''" name="fname"></p>
    <p><input placeholder="Last name..." oninput="this.className = ''" name="lname"></p>
  </div>

  <div class="tab">
  <label>What Is Your Age:</label>
    <input type="number" name="age" value="" min="1">
  </div>

  <div class="tab">
  <label>What Is Your Date Of Birth:</label>
  <input type="date" id="dob" name="dob">
  </div>

  <center><div class="tab">what is your gender:
    <div class="col-sm-2"><br>
    <select class="form-control inputstl" id="gender" name="gender">
        <option selected disabled> Select </option>
        <option> Male </option>
        <option> Female</option>
        <option> Other</option>
    </select>
    </div>  
  </div></center>
  <center><div class="tab">what is your relationship Status:
    <div class="col-sm-2"><br>
    <select class="form-control inputstl" id="relationship" name="relationship">
        <option selected disabled> Select </option>
        <option> Single Never Married </option>
        <option> Domestic Partnership</option>
        <option> Married</option>
        <option> Seperated</option>
        <option> Prefer Not to say</option>
        <option> None Of The Above</option>
    </select>
    </div>  
  </div></center>
  <center><div class="tab">
    <p>we care about the quality of our survey data and hope to receive the most
    accurate measures of your opinions, so it is important to us that you thoughtfully
    provide your best answer to each question in the survey, Do you commit to providing
    your thoughtful and honest answers to the questions in the survey?</p>  
  </div></center><br>
  <div style="overflow:auto;">
    <div style="float:right;">
      <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
      <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
    </div>
  </div>
  <!-- Circles which indicates the steps of the form: -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
  </div>
</form>

<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  //... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
  //... and run a function that will display the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form...
  if (currentTab >= x.length) {
    // ... the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class on the current step:
  x[n].className += " active";
}
</script>

</body>
</html>

我有一个带有导航栏的多步骤表单，经过几次战斗后可以正常工作...我尝试对此实施相同的操作，但是当我点击提交时，它只会让我回到问题 1，而数据库中没有任何内容.. .我的问题不是来自数据库。就像我说的我已经应用了类似的原则......

【问题讨论】：

代码太多。这是您开始学习如何调试的好时机。在 Google 上搜索“如何调试 PHP”之类的内容会让您入门。如果您使用的是 IDE，它可能具有有用的调试工具。即使您不是，您仍然可以通过在整个代码中输出键值、运行它并观察该输出来进行一些基本的调试。使用此过程来缩小问题范围。如果您的代码正在执行您不期望的事情，那么在您的代码中的某个特定操作正在产生您不期望的结果。找到那个操作，确定当时的值。
不是你检查if(isset($_POST["email"])) {...却连email字段都没有吗？
cyborg86pl 即使我把它写成if(isset($_post["regForm"])) {... 它仍然做同样的事情......

标签： javascript php html jquery css

【解决方案1】：

改变：

if(isset($_POST["email"]))

到

if(isset($_POST["fname"]))

它会工作，您必须知道该电子邮件从未发布过，并且您的 chekng isset 用于电子邮件。

【讨论】：