Add new option to the select list without reloading the page – MODAL

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

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