将多个动态值存储到表中

Question

我正在尝试一次将多个值存储到mysql数据库中。我有简单的表单，有动态输入字段。当我从表单提交值时，它只为第一个人插入值。其他值根本没有显示。如何存储每个输入字段的值？ EXAMPLE

Jquery创建字段

<script>
$(document).ready(function () {
    $('#btnAdd').click(function () {
        var num = $('.clonedSection').length;
        var newNum = new Number(num + 1);

        var newSection = $('#pq_entry_' + num).clone().attr('id', 'pq_entry_' + newNum);
        newSection.children(':first').children(':first').attr('id', 'name_' + newNum).attr('name', 'name_' + newNum).attr('placeholder', 'Person #' + newNum + ' First Name');      
        newSection.children(':nth-child(1)').children(':first').attr('id', 'faculty_' + newNum).attr('name', 'faculty_' + newNum);  
        newSection.children(':nth-child(2)').children(':first').attr('id', 'instructor_' + newNum).attr('name', 'instructor_' + newNum);
        newSection.insertAfter('#pq_entry_' + num).last();

        $('#btnDel').prop('disabled', '');

        if (newNum == 5) $('#btnAdd').prop('disabled', 'disabled');
    });

    $('#btnDel').click(function () {
        var num = $('.clonedSection').length; // how many "duplicatable" input fields we currently have
        $('#pq_entry_' + num).remove(); // remove the last element

        // enable the "add" button
        $('#btnAdd').prop('disabled', '');

        // if only one element remains, disable the "remove" button
        if (num - 1 == 1) $('#btnDel').prop('disabled', 'disabled');
    });

    $('#btnDel').prop('disabled', 'disabled');
});
</script>

PHP for insert

<?php
if(isset($_POST['submit'])){

$con = new mysqli(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);

$person1_faculty = $_POST['faculty_1'] ? 1 : 0;
$person1_instructor = $_POST['instructor_1'] ? 1 : 0;
$person1_name = $_POST['name_1'];
mysqli_query(
    $con,
    "INSERT INTO person (faculty_role, instructor_role, person_name) VALUES " .
    "(" . $person1_faculty . ", " . $person1_instructor . ", '" . $person1_name . "')"
);

print_r($_POST);
}

?>

HTML 的

<form action="test3.php" method="POST">
<b>Select the role for each person</b>
            <ul id="pq_entry_1" class="clonedSection">
                <li>
                    <input id="name_1" name="name_1" placeholder="Person #1 - First Name" type="text" />
                </li>
                 <li>
                    <input id="phone_1"  name="faculty_1" type="checkbox" />Faculty
                </li>
                 <li>
                    <input id="phone_1"  name="instructor_1" type="checkbox" />Instructor
                </li>
            </ul>
            <input type='button' id='btnAdd' value='add another Person' />
            <input type='button' id='btnDel' value='delete Delete' />   </br>
            <input value="SAVE" name="submit" type="submit">
</form>

Answer 1

我在JavaScript和PHP中检测到错误，HTML没问题：

JavaScript：必须使用：first，：nth-​​child（2）和：nth-​​child（3）。请参阅Reference。

<script>
$(document).ready(function () {
    $('#btnAdd').click(function () {
        var num = $('.clonedSection').length;
        var newNum = new Number(num + 1);

        var newSection = $('#pq_entry_' + num).clone().attr('id', 'pq_entry_' + newNum);
        newSection.children(':first').children(':first').attr('id', 'name_' + newNum).attr('name', 'name_' + newNum).attr('placeholder', 'Person #' + newNum + ' First Name');
        newSection.children(':nth-child(2)').children(':first').attr('id', 'faculty_' + newNum).attr('name', 'faculty_' + newNum);  
        newSection.children(':nth-child(3)').children(':first').attr('id', 'instructor_' + newNum).attr('name', 'instructor_' + newNum);
        newSection.insertAfter('#pq_entry_' + num).last();

        $('#btnDel').prop('disabled', '');

        if (newNum == 5) $('#btnAdd').prop('disabled', 'disabled');
    });

    $('#btnDel').click(function () {
        var num = $('.clonedSection').length; // how many "duplicatable" input fields we currently have
        $('#pq_entry_' + num).remove(); // remove the last element

        // enable the "add" button
        $('#btnAdd').prop('disabled', '');

        // if only one element remains, disable the "remove" button
        if (num - 1 == 1) $('#btnDel').prop('disabled', 'disabled');
    });

    $('#btnDel').prop('disabled', 'disabled');
});
</script>

PHP：循环遍历name_1，name_2和name_3，...

<?php
if(isset($_POST['submit']))
{
  $con = new mysqli(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);

  $i = 1;
  while(isset($_POST['name_' . $i]))
  {
    $person1_faculty = isset($_POST['faculty_' . $i]) ? 1 : 0;
    $person1_instructor = isset($_POST['instructor_' . $i]) ? 1 : 0;
    $person1_name = $_POST['name_' . $i];
    mysqli_query(
      $con,
      "INSERT INTO person (faculty_role, instructor_role, person_name) VALUES " .
      "(" . $person1_faculty . ", " . $person1_instructor . ", '" . $person1_name . "');"
    );
    $i++;
  }

  //print_r($_POST);

}
?>