处理动态表单数据：PHP 接收和存储学生成绩-js教程-PHP中文网

处理动态表单数据：php 接收和存储学生成绩

本文档旨在提供一种清晰有效的方法，用于处理通过 JavaScript 动态生成的表单数据，并将其存储到 PHP 后端数据库中。我们将重点解决如何为动态生成的表单元素创建唯一的名称，以便在 PHP 中正确地访问和处理这些数据。通过修改 HTML结构和JavaScript代码，确保数据能够以结构化的方式传递到服务器端，从而简化数据库存储过程。

问题分析

动态生成表单时，为每个新增的输入元素设置相同的 id 和 name 属性会导致两个主要问题：

HTML 规范冲突: id 属性在 HTML 文档中必须是唯一的。重复的 id 会导致 JavaScript 和 CSS 选择器行为不确定。
PHP 数据访问困难: 当多个输入元素具有相同的 name 属性时，PHP 的 $_POST 数组通常只会接收到最后一个输入的值，或者需要更复杂的方法来处理。

解决方案：使用数组形式的 name 属性

为了解决上述问题，我们修改 HTML 结构和 JavaScript 代码，以便为每个动态生成的输入元素赋予唯一的 name 属性，并使用数组形式的命名约定。

1. 修改 HTML 结构

立即学习“PHP免费学习笔记（深入）”；

将每个输入元素的 name 属性修改为数组形式，例如 entry[0][r]，entry[0][l]，entry[1][r]，entry[1][l] 等。其中，entry 是数组的名称，第一个索引（例如 0，1）代表第几个表单项，第二个索引（例如 r，l）代表具体的输入字段（Reading, Listening）。

2. 修改 JavaScript 代码

在 JavaScript 的 addEntry() 函数中，引入一个全局计数器 entry_counter，每次添加新的表单项时，递增该计数器。然后，使用该计数器动态生成每个输入元素的 name 属性。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

var entry_counter = 0;

function addEntry() {
  //create the 'entry-part' of the name, based on the counter
  const entry_id = "entry[" + entry_counter + "]";

  //create a div to group the display and make it easier to remove
  var container = document.getElementById("entry-container");
  var entry = document.createElement("div");
  entry.innerHTML = `
    <label for="r">Reading Score:</label>
    <input type="number" id="r" name="${entry_id}[r]"><br>

    <label for="l">Listening Score:</label>
    <input type="number" id="l" name="${entry_id}[l]"><br>

    <label for="s">Speaking Score:</label>
    <input type="number" id="s" name="${entry_id}[s]"><br>

    <label for="w">Writing Score:</label>
    <input type="number" id="w" name="${entry_id}[w]"><br>

    <label for="year">Year:</label>
    <select id="year" name="${entry_id}[year]">
      <option value=""></option>
      <?php
      $current_year = date('Y');
      for ($i = $current_year; $i >= $current_year - 5; $i--) {
        echo "<option value='$i'>$i</option>";
      }
      ?>
    </select>

    <label for="month">Month:</label>
    <select id="month" name="${entry_id}[month]">
      <option value=""></option>
      <option value="01">January</option>
      <option value="02">February</option>
      <option value="03">March</option>
      <option value="04">April</option>
      <option value="05">May</option>
      <option value="06">June</option>
      <option value="07">July</option>
      <option value="08">August</option>
      <option value="09">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
    </select>

    <label for="day">Day:</label>
    <select id="day" name="${entry_id}[day]">
      <option value=""></option>
      <?php
      for ($i = 1; $i <= 31; $i++) {
        echo "<option value='$i'>$i</option>";
      }
      ?>
    </select>
    <br><br>


    <button onclick="deleteEntry(this)">Delete</button>
    <br><br>
  `;
  container.appendChild(entry);
  entry_counter++;
}

登录后复制

3. PHP 后端处理

在 PHP 后端（process_score.php）中，可以通过 $_POST['entry'] 访问所有动态生成的表单数据。$_POST['entry'] 将是一个多维数组，其中每个元素代表一个表单项，每个表单项又包含各个输入字段的值。

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (isset($_POST['entry']) && is_array($_POST['entry'])) {
    foreach ($_POST['entry'] as $index => $entry) {
      $reading = isset($entry['r']) ? $entry['r'] : null;
      $listening = isset($entry['l']) ? $entry['l'] : null;
      $speaking = isset($entry['s']) ? $entry['s'] : null;
      $writing = isset($entry['w']) ? $entry['w'] : null;
      $year = isset($entry['year']) ? $entry['year'] : null;
      $month = isset($entry['month']) ? $entry['month'] : null;
      $day = isset($entry['day']) ? $entry['day'] : null;

      // 现在你可以将这些值存储到数据库中
      // 例如：
      // $sql = "INSERT INTO scores (reading, listening, speaking, writing, year, month, day) VALUES ('$reading', '$listening', '$speaking', '$writing', '$year', '$month', '$day')";
      // ... 执行 SQL 查询 ...

      echo "Entry " . $index . ":<br>";
      echo "Reading: " . $reading . "<br>";
      echo "Listening: " . $listening . "<br>";
      echo "Speaking: " . $speaking . "<br>";
      echo "Writing: " . $writing . "<br>";
      echo "Date: " . $year . "-" . $month . "-" . $day . "<br><br>";
    }
  } else {
    echo "No entries found.";
  }
}
?>

登录后复制

代码解释:

if (isset($_POST['entry']) && is_array($_POST['entry'])): 确保 $_POST['entry'] 存在且是一个数组。
foreach ($_POST['entry'] as $index => $entry): 遍历 $_POST['entry'] 数组， $index 是表单项的索引（例如 0, 1, 2），$entry 是包含该表单项所有字段值的数组。
isset($entry['r']) ? $entry['r'] : null: 使用三元运算符检查 $entry 数组中是否存在键 r (reading score)。如果存在，则将该键对应的值赋给 $reading 变量；否则，将 $reading 变量设置为 null。这样做可以避免尝试访问不存在的数组键时可能出现的错误。其他变量（$listening, $speaking, $writing, $year, $month, $day）也使用类似的方法进行赋值。
在循环内部，可以将每个表单项的数据插入数据库。

完整示例代码

HTML (index.html):

<html>
<head>
  <button onclick = "location.href='index.html'">
              Go Back</button>
  <title>TOEFL Scores</title>
  <script>
    var entry_counter=0;
    function addEntry() {
      //create the 'entry-part' of the name, based on the counter
      const entry_id = "entry[" + entry_counter + "]";

      //create a div to group the display and make it easier to remove
      var container = document.getElementById("entry-container");
      var entry = document.createElement("div");
      entry.innerHTML = `
        <label for="r">Reading Score:</label>
        <input type="number" id="r" name="${entry_id}[r]"><br>

        <label for="l">Listening Score:</label>
        <input type="number" id="l" name="${entry_id}[l]"><br>

        <label for="s">Speaking Score:</label>
        <input type="number" id="s" name="${entry_id}[s]"><br>

        <label for="w">Writing Score:</label>
        <input type="number" id="w" name="${entry_id}[w]"><br>

        <label for="year">Year:</label>
        <select id="year" name="${entry_id}[year]">
          <option value=""></option>
          <?php
          $current_year = date('Y');
          for ($i = $current_year; $i >= $current_year - 5; $i--) {
            echo "<option value='$i'>$i</option>";
          }
          ?>
        </select>

        <label for="month">Month:</label>
        <select id="month" name="${entry_id}[month]">
          <option value=""></option>
          <option value="01">January</option>
          <option value="02">February</option>
          <option value="03">March</option>
          <option value="04">April</option>
          <option value="05">May</option>
          <option value="06">June</option>
          <option value="07">July</option>
          <option value="08">August</option>
          <option value="09">September</option>
          <option value="10">October</option>
          <option value="11">November</option>
          <option value="12">December</option>
        </select>

        <label for="day">Day:</label>
        <select id="day" name="${entry_id}[day]">
          <option value=""></option>
          <?php
          for ($i = 1; $i <= 31; $i++) {
            echo "<option value='$i'>$i</option>";
          }
          ?>
        </select>
        <br><br>


        <button onclick="deleteEntry(this)">Delete</button>
        <br><br>
      `;
      container.appendChild(entry);
      entry_counter++;
    }
    function deleteEntry(button) {
      var div = button.parentNode;
      div.parentNode.removeChild(div);
    }
  </script>
</head>
<body>
  <h3>TOEFL Scores</h3>
  <form method="post" action="process_score.php">
    <div id="entry-container">
      <!-- Initial entry goes here -->

      </div>
    </div>
    <button type="button" onclick="addEntry()">Add Score</button>
    <br><br>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

登录后复制

PHP (process_score.php):

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (isset($_POST['entry']) && is_array($_POST['entry'])) {
    foreach ($_POST['entry'] as $index => $entry) {
      $reading = isset($entry['r']) ? $entry['r'] : null;
      $listening = isset($entry['l']) ? $entry['l'] : null;
      $speaking = isset($entry['s']) ? $entry['s'] : null;
      $writing = isset($entry['w']) ? $entry['w'] : null;
      $year = isset($entry['year']) ? $entry['year'] : null;
      $month = isset($entry['month']) ? $entry['month'] : null;
      $day = isset($entry['day']) ? $entry['day'] : null;

      // 现在你可以将这些值存储到数据库中
      // 例如：
      // $sql = "INSERT INTO scores (reading, listening, speaking, writing, year, month, day) VALUES ('$reading', '$listening', '$speaking', '$writing', '$year', '$month', '$day')";
      // ... 执行 SQL 查询 ...

      echo "Entry " . $index . ":<br>";
      echo "Reading: " . $reading . "<br>";
      echo "Listening: " . $listening . "<br>";
      echo "Speaking: " . $speaking . "<br>";
      echo "Writing: " . $writing . "<br>";
      echo "Date: " . $year . "-" . $month . "-" . $day . "<br><br>";
    }
  } else {
    echo "No entries found.";
  }
}
?>

登录后复制