Make bootstrap modal utilize seperate form/sql table

Question

I have a form that alters a sql table called "invoices". I want to popup a bootstrap modal that will alter a sql table called "customers". Right now, the only thing that is saved properly is the customer name... am I missing something? Here is the code I have so far...

main page :

<!-- Modal Add Customer -->
     <div class="modal fade" id="addNewCustomer" tabindex="-1" role="dialog" aria-labelledby="addNewCustomerLabel">
      <div class="modal-dialog" role="document">
        <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" id="myModalLabel">Add New Customer</h4>
          </div>
           <div class="modal-body">
            <form action="<?php echo $_SERVER['PHP_SELF']; ?>" id="add_customer_form" method="post" class="form-horizontal myaccount" role="form">
            <div class="form-group col-lg-7">
                    <label for="customer_Name_modal">Customer Name (Last Name, First Name)</label>
                    <input type="text" class="form-control" id="customer_Name_modal" name="customer_Name_modal" placeholder="Last Name, First Name">
                    <span class="help-block"></span>
                </div>
            <div class="form-group col-lg-7">
                    <label for="customer_Phone_modal">Phone Number (555-555-5555)</label>
                    <input type="text" class="form-control" id="customer_Phone_modal" name="customer_Phone_modal" placeholder="555-555-5555">
                    <span class="help-block"></span>
                </div>
            <div class="form-group col-lg-7">
                    <label for="customer_Email_modal">Email (johndoe@gmail.com)</label>
                    <input type="text" class="form-control" id="customer_Email_modal" name="customer_Email_modal" placeholder="john@doe.com">
                    <span class="help-block"></span>
                </div>
            <div class="form-group col-lg-7">
                    <label for="customer_Address1_modal">Address Line 1 </label>
                    <input type="text" class="form-control" id="customer_Address1_modal" name="customer_Address1_modal" placeholder="">
                    <span class="help-block"></span>
                </div>
            <div class="form-group col-lg-7">
                    <label for="customer_Address2_modal">Address Line 2 </label>
                    <input type="text" class="form-control" id="customer_Address2_modal" name="customer_Address2_modal" placeholder="">
                    <span class="help-block"></span>
                </div>
            <input type="hidden" id="current_element_id">
        </form>
        </div>
        <div class="modal-footer">
            <button type="button" id="add_new_customer_btn" class="btn btn-primary" data-loading-text="Saving Customer...">Save changes</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
            </div>
            </div>
            </div>

Form Save Code :

var save_new_customer = function(){

    $('#add_new_customer_btn').button('loading');

    data = {
            customerName : $('#customer_Name_modal').val(),
            customerPhone : $('#customer_Phone_modal').val(),
            customerEmail : $('#customer_Email_modal').val(),
            customerAddress1 : $('#customer_Address1_modal').val(),
            customerAddress2 : $('#customer_Address2_modal').val(),
    }


    $.ajax({
         url: "ajax.php",
         dataType: "json",
         method: 'post',
         data: {
            data : data,
            type: 'saveNewCustomer'
         },
         success: function(result){
            if( (typeof result.success !== "undefined") && result.success ){

                $("html, body").animate({ scrollTop: 0 }, "slow");
                $('#add_new_customer_btn').button('reset');

                $('#addNewCustomer').modal('show');
                element_id = $('#current_element_id').val();
                $('#customerName_'+element_id).val($('#customer_Name_modal').val());
                $('#phone_'+element_id).val( $('#customer_Email_modal').val() );
                $('#email_'+element_id).val($('#customer_Phone_modal').val());
                $('#addressLine1_'+element_id).val($('#customer_Address1_modal').val());
                $('#addressLine2_'+element_id).val($('#customer_Address2_modal').val());

                $('#add_customer_form')[0].reset();
                $('#add_customer_form').find("div.form-group").removeClass('has-success');
                $('#message_h1').show();
                message('success', CUSTOMER_ADD_SUCCESS);
            }else{
                message('fail', CUSTOMER_ADD_FAIL);
            }
        }
     });


}

Sql Code :

if(isset($_POST['type']) && $_POST['type'] == 'saveNewCustomer' ){
    $res = array();
    $res['success'] = false;

    if(!isset($_POST['data']) || empty($_POST['data'])){
        echo json_encode($res);exit;
    } 
    $data = $_POST['data'];

    $customerName = mysqli_real_escape_string( $db->con, trim( $data['customerName'] ) );
    $customerPhone = mysqli_real_escape_string( $db->con, trim( $data['phone'] ) );
    $customerEmail = mysqli_real_escape_string( $db->con, trim( $data['email'] ) );
    $customerAddress1 = mysqli_real_escape_string( $db->con, trim( $data['addressLine1'] ) );
    $customerAddress2 = mysqli_real_escape_string( $db->con, trim( $data['addressLine2'] ) );

    $uuid = uniqid();
    $result['operation'] = 'insert';
    $query = "INSERT INTO customers (id, customerName, phone, email, addressLine1, addressLine2, uuid) 
            VALUES (NULL, '$customerName', '$customerPhone', '$customerEmail', '$customerAddress1', '$customerAddress2', '$uuid');";


    if(mysqli_query($db->con, $query)){
        mysqli_close($db->con);
        $res['success'] = true;
    }
    echo json_encode($res);exit;


}

Answer 1

You're using the wrong key in PHP

You're calling these keys:

$customerName = mysqli_real_escape_string( $db->con, trim( $data['customerName'] ) );
$customerPhone = mysqli_real_escape_string( $db->con, trim( $data['phone'] ) );
$customerEmail = mysqli_real_escape_string( $db->con, trim( $data['email'] ) );
$customerAddress1 = mysqli_real_escape_string( $db->con, trim( $data['addressLine1'] ) );
$customerAddress2 = mysqli_real_escape_string( $db->con, trim( $data['addressLine2'] ) );

but you should be calling:

$customerName = mysqli_real_escape_string( $db->con, trim( $data['customerName'] ) );
$customerPhone = mysqli_real_escape_string( $db->con, trim( $data['customerPhone'] ) );
$customerEmail = mysqli_real_escape_string( $db->con, trim( $data['customerEmail'] ) );
$customerAddress1 = mysqli_real_escape_string( $db->con, trim( $data['customerAddress1'] ) );
$customerAddress2 = mysqli_real_escape_string( $db->con, trim( $data['customerAddress2'] ) );

To fix this just copy and paste (replace) the variable assignment in the SQL code.