在不重新加載頁面的情況下向 select 列表添加新選項 - MODAL

Question

我正在嘗試 append 在 select 列表中添加一個新選項，而無需在用戶通過引導模式添加新選項后刷新頁面

我能夠實現它，但我面臨一個問題。 我還需要append option標簽的value屬性中的customer_id

Select 標簽

    <select class="form-control form-control-chosen add-customer-tag" id="invoice_customer_name" name="invoice_customer_name">
        <option style="display:none" disabled selected>Customer Name</option> 
        <option value="add-new-customer">Add New Customer</option>
<?php 
if(mysqli_num_rows($select_customer_query)>0){
    while($customer_result = mysqli_fetch_assoc($select_customer_query)) { 
?>
        <option value="<?php echo $customer_result['customer_id']; ?>"><?php echo $customer_result['customer_name']; ?></option>
<?php 
    }
} 
?>
    </select>

Ajax 調用

      $.ajax({
         url: 'includes/add-customer-modal.inc.php',
         type: 'POST',
         data: {customer_name:customer_name},
         success: function(add_customer_result){
             $('.error_message').html(add_customer_result);
             if($(add_customer_result).hasClass("alert-success")){
                 $("#invoice_customer_name").append("<option>" + customer_name + "</option>") // this would insert only the customer name in option, but I need to also insert the customer_id which is coming from database 
                 $("#invoice_customer_name").trigger("chosen:updated");
             }
         }
      });

add-customer-modal.inc.php

<?php 

session_start();

include 'db-connection.php';

   

   $user_id = $_SESSION['user_id'];
   $customer_name = mysqli_real_escape_string($connection, $_POST['customer_name']);

   
   if(empty($customer_name)){
       
       echo "<span class='alert alert-danger'>Customer name cannot be blank</span>";
       
   } else {
       
   $insert_customer = "insert into customer(user_id,customer_name) values('$user_id','$customer_name')";

   $inser_customer_query = mysqli_query($connection,$insert_customer)  or die(mysqli_error($connection));

   if($inser_customer_query){
       echo "<span class='alert alert-success'>Customer has been added</span>";
   }
   }

?>

而且我知道我的代碼容易受到 sql 注入的影響。 我將很快轉向准備好的聲明

我能夠 append 選項列表中的 customer_name 而不重新加載頁面但不是 customer_id

Answer 1

哦，親愛的，我們在該代碼中有一點 SQL 注入問題所以...

首先您需要使用准備好的參數化查詢，然后我會將從此腳本返回的內容更改為始終為 JSON，這樣您就可以在一個 package 數據中傳遞狀態和有用信息

<?php 
session_start();
include 'db-connection.php';

$user_id = $_SESSION['user_id'];
   
$response = [];

if(empty($customer_name)){
    $response['status'] = 0;
    $response['status_msg'] = "Customer name cannot be blank";
} else {
      
    $sql = "insert into customer (user_id,customer_name) values(?,?)";
    $stmt = $connection->prepare($sql);
    $stmt->bind_param('ss', $_SESSION['user_id'], $_POST['customer_name']);
    $ok = $stmt->execute();
    if ( $ok ) {
        $response['status'] = 1;
        $response['status_msg'] = "Customer has been added";
        // get the id from the inserted customer
        $response['customer_id'] = $connection->insert_id;
    } else {
        // return some error code and message like above
    }
}
echo json_encode($response);
?>

現在在 javascript 中，您擁有所需的所有信息，您只需將其放入所需的位置

$.ajax({
        url: 'includes/add-customer-modal.inc.php',
        type: 'POST',
        data: {customer_name:customer_name},
        dataType: 'JSON',   // tell it to expect a JSON reply
                            // and will convert the reply to an js object
        success: function(response){
            if ( response.status == 0){
                // error
                $('.error_message').html(response.status_msg);
            } else {
                $("#invoice_customer_name")
                    .append("<option value='" + 
                        response.customer_id + "'>" + customer_name + "</option>") 
                 $("#invoice_customer_name").trigger("chosen:updated");
             }
        }
});

Answer 2

在 add-customer-modal.inc.php 您需要返回新創建的客戶 ID

    <?php 
        
        session_start();
        
        include 'db-connection.php';
        
           $user_id = $_SESSION['user_id'];
           $customer_name = mysqli_real_escape_string($connection, $_POST['customer_name']);
        
           
           if(empty($customer_name)){
               $message = "<span class='alert alert-danger'>Customer name cannot be blank</span>"; 
               $array = array(
                 'status' => 'failed',
                 'message' => $message
               );
           } else {
               $insert_customer = "insert into customer(user_id,customer_name) values('$user_id','$customer_name')";
               $inser_customer_query = mysqli_query($connection,$insert_customer)  or die(mysqli_error($connection));
               if($inser_customer_query){
                 $customer_id = mysqli_insert_id($connection);
                 $message = "<span class='alert alert-success'>Customer has been added</span>";
                 $array = array(
                   'status' => 'success',
                   'message' => $message,
                   'customer_id' => $customer_id 
                 );
               }
           }
        echo json_encode($array);
        ?>

編輯 Ajax 調用

$.ajax({
         url: 'includes/add-customer-modal.inc.php',
         type: 'POST',
         data: {customer_name:customer_name},
         success: function(add_customer_result){
             var result = $.parseJSON(add_customer_result);
             $('.error_message').html(result.message);
             if(result.status == 'success'){
                 $("#invoice_customer_name").append("<option value='"+result.customer_id+"'>" + customer_name + "</option>") // this would insert only the customer name in option, but I need to also insert the customer_id which is coming from database 
                 $("#invoice_customer_name").trigger("chosen:updated");
             }
         }
      });