在不重新加载页面的情况下向 select 列表添加新选项 - MODAL

Question

I'm trying to append a new option in the select list without refreshing the page once the user added a new option through the bootstrap modal

I able to achieve it but there is one problem I'm facing. I also need to append the customer_id in the value attribute of the option tag

Select Tag

    <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 call

      $.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>";
   }
   }

?>

and I know my code is vulnerable to sql injection. I will shift to the prepared statement very soon

I was able to append the customer_name in the options list without reloading the page but not the customer_id

Answer 1

Oh dear, we have a bit of a SQL Injection Issue in that code So...

first you need to use prepared parameterised queries, then I would change what is returned from this script to always be JSON, so you can pass the status as well as useful info all in one package of data

<?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);
?>

Now in the javascript you have all the info you need you just have to put in where you want it

$.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

in add-customer-modal.inc.php you needs to return the newly created Customer 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);
        ?>

Edit Ajax call

$.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");
             }
         }
      });