get results from database based on a selectfield

Question

I have been trying to make to make a page where i could select a customer and would get the corresponding customer details from a database. It should look something like this:

<select id="select_customer">   
  <option value='1'>customer 1</option>
  <option value='1'>customer 2</option> 
</select>

public function getCustomerDetails($customerId) {
    if(isset($customerId)) {
        $customer = DB::getInstance()->query("select * from customers");
        foreach($customer->results() as $customer) {
            $str = "<li>{$customer->name}</li>";
            $str .= "<li>{$customer->name_contactperson}</li>";
            $str .= "<li>{$customer->email}</li>";
            $str .= "<li>{$customer->address} {$customer->house_number}</li>";
            $str .= "<li>{$customer->postalcode}</li>";
            $str .= "<li>{$customer->city}</li>";
            $str .= "<li>{$customer->country}</li>";
        }

        return $str;
    } 
    return false;
}

What i now would like to do is to get the value from the select_customer post this with ajax to the getCustomerDetails method and get the corresponding details without a page reload. I tried to make it work with ajax and with xAjax but i coulden't get it to work.

I tried this:

<?php include 'xajaxAIO.inc.php'; 
$xajax = new xajax(); 
$xajax->register(XAJAX_FUNCTION, 'getCustomers'); 
$xajax->processRequest(); ?> 
<input type="button" onclick="xajax_getCustomerDetails(1);" value="Click Me" />

The other thing i tried was this:

<script>
document.getElementById('select_customer').addEventListener('change', function() {
    var $userId = this.value;
    $.ajax({
        type: "POST",
        url: "classes/invoice.php",
        data: "getCustomerDetails("+$userId+")"
    })
});
</script>

I dont get any error messages in my console but it seems like the requested function doesnt execute.

Anybody who could tell me how it could get this to work?

Thanks in advance!

Answer 1

I would recommend just sending $userId alone then call getCustomerDetails($userId) in the invoice.php page.

$.ajax({
    type: "GET",
    url: "classes/invoice.php",
    data: $userId
  })
});

OR

$.ajax({
    type: "GET",
    url: "classes/invoice.php&function=getCustomerDetails&userId="+$userId
    dataType: "json", //Dont need this if youre returning a string
    success: function(result) {
        alert(result);
    }
  })
});

Then in the invoice page you could call the function using the $_GET variable like so:

 $response = 'error;
 if($_GET['function'] == 'getCustomerDetails'){
      if(!empty($_GET['userId'])){
           $_GET['userId'] = 0;
       }
       $userID = $_GET['userId'];
       $response = getCustomerDetails($userID);
 }
die(json_encode($response)); //for array
die($response); //for a string