jQuery 创建的字段不发送 POST 数据到 PHP

Question

我的代码没有从表单中 jQuery 创建的字段获取任何发布数据。我注释掉了很多代码以查看到底发生了什么，但我的 $_POST 只接收在 html 中手动设置的字段。页面上显示 jQuery 创建的字段并允许我输入数据。所以我不明白为什么在我的 php 代码中提交后没有收到任何发布数据。有没有办法捕获这些字段中的数据并在提交之前保存它们？      <?php    session_start();    require_once "pdo.php";    // Demand a GET parameter    if ( ! isset($_SESSION['user_id']) || strlen($_SESSION['user_id']) < 1  ) {        die('ACCESS DENIED');    } else {        $username = $_SESSION['who'];        $user_id = $_SESSION['user_id'];    }    if ( isset($_POST['cancel'] ) ) {        // Redirect the browser to game.php        unset($_SESSION['first_name']);        unset($_SESSION['last_name']);        unset($_SESSION['email']);        unset($_SESSION['headline']);        unset($_SESSION['summary']);        header("Location: index.php?name=".urlencode($_SESSION['who']));        return;    }    if ( isset($_POST['clear']) ) {        $first_name = '';        $last_name = '';        $email = '';        $headline = '';        $summary = '';        unset($_POST);    }    if ( isset($_POST['headline']) && isset($_POST['summary']) && isset($_POST['email'])         && isset($_POST['first_name']) && isset($_POST['last_name'])) {        //$first_name = $_POST['first_name'];        $email = $_POST['email'];        //$headline = $_POST['headline'];        $findme = "@";        $pos = strpos($email, $findme);        if ( strlen($_POST['headline']) < 1 || strlen($_POST['last_name']) < 1                 || strlen($_POST['first_name']) < 1 || strlen($_POST['email']) < 1                || strlen($_POST['summary']) < 1){            $_SESSION['error'] = "All Fields Are Required";            header("Location: add.php?name=".urlencode($_SESSION['who']));            return;        } 

Answer 1

问题是，由于您是动态添加字段，因此 DOM 不知道它们存在。

您所要做的就是拨打电话，form.serialize()以便从表单字段中获取所有数据。

我创建了一个小型工作示例，以便您可以了解应该做什么：

$(document).ready(function() {

  var form = $('form');

  var fields = $('#fields');

  

  var add_button = $('#add');

  add_button.click(function(event) {

    console.log('Add a new field');

    

    // Notice I'm using backtick instead of quotes

    // It's easier to read and add data dinamically

    fields.append(`

      <div>

        <label for="field_${count}">Field #${count}</label><br />

        <input type="text" name="field_${count}" id="field_${count}" />

      </div>

    `);

    

    count++;

  });

  

  var count = 1;

  var submit_button = $('#submit');

  submit_button.click(function(event) {

    event.preventDefault();

    

    // Executes an AJAX's POST request

    $.post(

    

      // replace with the URL that will process the POST request

      'https://jsonplaceholder.typicode.com/posts',

      

      // here is where the magic happens

      // form.serialize get data from all fields

      // in your form object and submit them via AJAX

      form.serialize(),

      

      // Here you process the server's response

      function(data) {

        // do something with your data

        console.log(data);

      }

    );

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="form" method="post">

  <div>

    <input type="button" id="add" value="Add" />

  </div>

  <div id="fields">

    <div>

      <label for="first_name">First Name</label><br />

      <input type="text" name="first_name" id="first_name" />

    </div>

    <div>

      <label for="first_name">Last Name</label><br />

      <input type="text" name="last_name" id="last_name" />

    </div>

  </div>

  <div>

    <input type="submit" name="submit" id="submit" value="Submit" />

  </div>

</form>