javascript - Onchange dropdown filter table json -

i have 4 select drop-downs each filter particular field , want filter table user selects option in either select.

note table gets data server-side json file.

i trying use ajax call same php file gets table data , stores in json file place conditionals , alter query adding clause select data:

/* drop-down menu variables */ $dd_fname = $_post["first_name"]; $dd_lname = $_post['last_name']; $dd_category = $_post['category']; $dd_group = $_post["group"];  if (isset($_post['first_name'])) { //filter. getting ignored $stmt = "select first_name, last_name, category, group\n" . "\n" . "from users . "\n" . "where first_name =$dd_fname"; $result = mysqli_query($mysqli, $stmt); $num_rows = mysqli_num_rows($result); }  else { //no filter. initial data. executes no matter $stmt = "select first_name, last_name, category, group\n" . "\n" . "from users";  $result = mysqli_query($mysqli, $stmt); $num_rows = mysqli_num_rows($result); }  /* code add json file , echo table after */ 

so on initial onload table displayed. when user selects option filter want ajax update drop down variables in php file (as onload empty) trigger sql query has isset , overwriting json filtered results. issue isset block gets ignored , initial unfiltered data being returned.

/*ajax code runs onclick now*/ function filter_drop_down() {  //get 4 select tag data     var first_name = document.getelementbyid('first_name').value;     var last_name = document.getelementbyid('last_name').value;     var category = document.getelementbyid('category').value;     var group = document.getelementbyid('group').value;      if ((first_name || last_name || category || group) === '') {         alert("select @ least 1 option use filter");       return false;     }  //send filter variables server     var xhr;     if (window.xmlhttprequest) { // mozilla, safari, ...         xhr = new xmlhttprequest();     } else if (window.activexobject) { // ie 8 , older         xhr = new activexobject("microsoft.xmlhttp");     }     var data = "dd_fname=" + first_name + "&dd_lname=" + last_name + "&dd_categoryr=" + category + "&dd_group=" + group;     xhr.open("post", "filethatgetsdatafortable.php", true);     /************************************************/      xhr.setrequestheader("content-type", "application/x-www-form-urlencoded");     xhr.send(data);  } 

update: having problem getting table display data of new query via ajax:

if (!empty($_post['first_name'])) { //filter. ***fixed***     $stmt = "select first_name, last_name, category, group\n"     . "\n"     . "from users     . "\n"     . "where first_name =$dd_fname";     $result = mysqli_query($mysqli, $stmt);     $num_rows = mysqli_num_rows($result);     } 

and upon looking @ xhr return, json file has not been updated

update: progress. have done debugging , (500 internal server error) when php file write filtered json data. error coming ajax; line in particular:

xhr.send(data); 

what causing this? ajax has sent select dropdown variables (and did see these while debugging php).

update: after researching appears 500 error resulted way had set mysqli_fetch_assoc function.

     while ($row = mysqli_fetch_assoc($result)) {         $cart[$i] = array(           "first name" => htmlspecialchars($row['first_name']),           "last name" => htmlspecialchars($row['last_name']),           "category" => htmlspecialchars($row['category']),           "group" => htmlspecialchars($row['group']),         );         $i = $i + 1; //add next row       }      //encoding php array      $json_server_pagination_data = array(          "total" => intval($num_rows), // total rows in data          "rows" => $cart, //array data      );        echo json_encode($json_server_pagination_data);   } else {      //do nothing . no data in sql query  }

as per usual, 1 problem leads another. have access filtered data (in both html page via php , via javacript) not know how overwrite initial data first loaded table onload. thought writing echo json_encode($json_server_pagination_data) overwrite not seem case.

the variable set long sent form .

so better check of variable not empty.

if(!empty($_post['var']))

https://stackoverflow.com/a/21123685/1889605

followup

regarding errors, said wrote 500 error on server, mention error on client (xhr.send(data);)?

first enable error reporting see what's problem on server.

second, use console debug js:

console.log(data); xhr.send(data); 

or better yet, check whole request via network tab in developer tools.