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() {&nbsp; var form = $('form');&nbsp; var fields = $('#fields');&nbsp;&nbsp;&nbsp; var add_button = $('#add');&nbsp; add_button.click(function(event) {&nbsp; &nbsp; console.log('Add a new field');&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Notice I'm using backtick instead of quotes&nbsp; &nbsp; // It's easier to read and add data dinamically&nbsp; &nbsp; fields.append(`&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <label for="field_${count}">Field #${count}</label><br />&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="field_${count}" id="field_${count}" />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; `);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; count++;&nbsp; });&nbsp;&nbsp;&nbsp; var count = 1;&nbsp; var submit_button = $('#submit');&nbsp; submit_button.click(function(event) {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Executes an AJAX's POST request&nbsp; &nbsp; $.post(&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; // replace with the URL that will process the POST request&nbsp; &nbsp; &nbsp; 'https://jsonplaceholder.typicode.com/posts',&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; // here is where the magic happens&nbsp; &nbsp; &nbsp; // form.serialize get data from all fields&nbsp; &nbsp; &nbsp; // in your form object and submit them via AJAX&nbsp; &nbsp; &nbsp; form.serialize(),&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; // Here you process the server's response&nbsp; &nbsp; &nbsp; function(data) {&nbsp; &nbsp; &nbsp; &nbsp; // do something with your data&nbsp; &nbsp; &nbsp; &nbsp; console.log(data);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; );&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form id="form" method="post">&nbsp; <div>&nbsp; &nbsp; <input type="button" id="add" value="Add" />&nbsp; </div>&nbsp; <div id="fields">&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <label for="first_name">First Name</label><br />&nbsp; &nbsp; &nbsp; <input type="text" name="first_name" id="first_name" />&nbsp; &nbsp; </div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <label for="first_name">Last Name</label><br />&nbsp; &nbsp; &nbsp; <input type="text" name="last_name" id="last_name" />&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <input type="submit" name="submit" id="submit" value="Submit" />&nbsp; </div></form>