尝试使用表单向 MYSQL 添加多条记录

Question

我有一个表单，它允许用户添加一个新的课程名称，并让他们可以选择添加更多记录，这样更方便，而不是单独提交每个记录。

我尝试使用我在许多在线示例中看到的语法，它可以动态添加额外的行，但这会在连接到 mysql 数据库时影响表单提交。

它将添加第一条记录而不是第二条记录，我不确定我是否使用 PDO 正确执行它。

如果有人能就我如何实现这一点以及我的代码失败的原因提供一些见解，我将不胜感激。

php 文件：

<?php

include "db_conx.php";

try
{
    $db_conx = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);

    $db_conx->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $sql = $db_conx->prepare("INSERT INTO `insights`.`course_details` (`course_title`) VALUES (:course_title)");

    $course_title = $_POST['course_title'];
        //$course_code = $_POST['course_code'];

    $sql->bindParam(':course_title', $course_title, PDO::PARAM_STR);
        //$sql->bindParam(':course_code', $course_code, PDO::PARAM_STR);


    /*** execute the prepared statement ***/

    $courses = array();
    if ($sql->execute()) {
            $courses[] = $sql;
        }
    }

    /*** success message ***/


    $message = "<p class='text-success'> Record Successfully Added <span class='glyphicon glyphicon-ok'/></p>";
} 
catch(Exception $e)
{
    $message = 'Message: ' .$e->getMessage();
}


die($message);
?>

单击时添加更多行并在单击“提交”时提交表单的 AJAX：

function addCall() {
  var data = $('#addForm').serialize();
  $.post('ManageCourses_AddSubmit.php', data, function(response){

    $("#addForm").html(response);
    //'soft'reload parent page, after a delay to show message
    setTimeout(function(){
      $('#addModal').modal('hide')
      location.reload();
    },3500);

  }).fail(function(jqXHR, textStatus) {
    alert( "Request failed: " + textStatus );
  });
}

jQuery(function($){
    var i = 1;
    var $button = $('#add_row'),
        $row = $('.addForm').clone();

    $button.click(function(){
        $row.clone().insertBefore( $button );
    });
});

发送数据的表单：

                <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title">Add New Record: </h4>
                            </div>
                            <div class="modal-body">
                                <form id="addForm" class="addForm">
                                    <div class="form-group">
                                        <label for="course_code" class="pull-left" class="control-label">Course Code:</label>
                                        <input type="text" class="form-control" id="course_code_id" name="code[]" readonly value ="NULL">
                                    </div>
                                    <div class="form-group">
                                        <label for="course_name" class="pull-left" class="control-label">Course Title:</label>
                                        <input type="text" class="form-control" placeholder="Enter Course Title" id="course_title_id" name="course_title">
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <div class="btn-toolbar">
                                    <button type="button" class="btn btn-primary" id="add_row" name="add_row">Add New Record <span class="glyphicon glyphicon-plus"></button>
                                    <button type="button" class="btn btn-danger" id="del_row" name="del_row">Delete Row <span class="glyphicon glyphicon-trash"></button>
                                    <button type="button" class="btn btn-default" class="pull-right" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-success" class="pull-right" onclick="addCall();">Submit <span class="glyphicon glyphicon-saved"></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

谢谢！ :)

Answer 1

您的问题来自以下行中的元素 id：

var data = $('#addForm').serialize();

首先，您应该始终将 id 属性视为仅存在于 DOM 的一个位置。有关详细信息，请参阅：

http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

要解决您的问题，您需要从每个元素传递数据并在后端以不同方式处理数据。在您的 JavaScript 中，更改以下行：

var data = $('#addForm').serialize();

到：

var data = {};
var index = 0;
// use the class of the form elements instead
$('.addForm').each(function(){
  // take each form value an store it within the data variable
  data['course_code'][index] = $(this).find('input[name=course_code]').val();
  data['course_title'][index] = $(this).find('input[name=course_title]').val();
  index++;
});

现在，您需要更新后端以接受新的值数组...

<?php

include "db_conx.php";

try
{
    $db_conx = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);

    $db_conx->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $courses = array();
    // check if we have valid post data
    if(isset($_POST['course_code']) && isset($_POST['course_title']))
    {
      foreach($_POST['course_code'] as $index=>$course_code)
      {
        // check if we have a matching title (needed for the title insert)
        $course_title = '';
        if(isset($_POST['course_title'][$index]))
          $course_title = $_POST['course_title'][$index];
        else
          continue; // no title found, skip to the next index

        // at this point, use $course_title and $course_code in your query
        $sql = $db_conx->prepare("INSERT INTO `insights`.`course_details` (`course_title`, `course_code`) VALUES (:course_title, :course_code)");

        $sql->bindParam(':course_title', $course_title, PDO::PARAM_STR);
        $sql->bindParam(':course_code', $course_code, PDO::PARAM_STR);

        /*** execute the prepared statement ***/
        if ($sql->execute()) {
          $courses[] = $sql;
        }
      }
    }

    /*** success message ***/


    $message = "<p class='text-success'> Records Successfully Added <span class='glyphicon glyphicon-ok'/></p>";
} 
catch(Exception $e)
{
    $message = 'Message: ' .$e->getMessage();
}


die($message);
?>