javascript - Send multiple variable with PHP AJAX GET onclick of a button -

i have 2 dynamically loaded dropdowns: 1 containing golf course holes information , holding users- information used generate scorecard.

when course selected , user selected want click button , generate scorecard.

below code 'course' dropdown

<?php     $db_host = 'localhost';     $db_user = 'root';     $db_pass = '';     $db_name = '';      $con = mysqli_connect($db_host,$db_user,$db_pass, $db_name);     if (!$con) {     die('could not connect: ' . mysqli_error($con));     }          $sql = "select courseid, name courses";      $result = mysqli_query($con, $sql) or die("error: ".mysqli_error($con));      while ($row = mysqli_fetch_array($result))     {         $courses[] = '<option       value="'.$row['courseid'].'">'.$row['name'].'</option>';     }       ?>  

below code 'user' dropdown

<?php       $db_host = 'localhost';     $db_user = 'root';     $db_pass = '';     $db_name = '';      $con = mysqli_connect($db_host,$db_user,$db_pass, $db_name);     if (!$con) {     die('could not connect: ' . mysqli_error($con));     }          $sql = "select userid, forename, surname user";      $result = mysqli_query($con, $sql) or die("error: ".mysqli_error($con));      while ($row = mysqli_fetch_array($result))     {     $users[] = '<option value="'.$row['userid'].'">'.$row['forename'].' '.$row['surname'].'</option>';     }       ?>  

below html code dropdowns

<form> <select id="selectcourse" onchange="showcourse(this.value)">    <option value = "">select course</option>   <?php foreach($courses $c){     echo $c; }?> </select>  <select id="selectuser" >     <option value = "">select user</option>     <?php foreach($users $u){         echo $u;     } ?>     </select>  <button type="button" >click me</button> </form> 

at moment have code uses 'onchange' load first part of scorecard contains hole information course. having problems changing click of button , consider variable user dropdown.

the below code taken w3schools loaded hole information correctly based on 'onchange'.

   <script> function showcourse(str) {     if (str == "") {         document.getelementbyid("txthint").innerhtml = "";         return;     } else {          if (window.xmlhttprequest) {             // code ie7+, firefox, chrome, opera, safari             xmlhttp = new xmlhttprequest();         } else {             // code ie6, ie5             xmlhttp = new activexobject("microsoft.xmlhttp");         }         xmlhttp.onreadystatechange = function() {             if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {                 document.getelementbyid("txthint").innerhtml = xmlhttp.responsetext;             }         }         xmlhttp.open("get","generatesc.php?cvalue="+str,true);         xmlhttp.send();     } } </script> 

the below code shows first half of scorecard being generated selection of first dropdown.

    <?php $cvalue = mysql_real_escape_string($_get['cvalue']);    $db_host = 'localhost'; $db_user = 'root'; $db_pass = ''; $db_name = '';  $con = mysqli_connect($db_host,$db_user,$db_pass,$db_name); if (!$con) {     die('could not connect: ' . mysqli_error($con)); }  $sql="select distinct holenumber, strokeindex, par holes courseid= '".$cvalue."'"; $result = mysqli_query($con,$sql) or die("error: ".mysqli_error($con));   echo '<div class="scorecardtable"> <table> <tr> <th>holenumber</th> <th>par</th> <th>stroke index</th> <th>score</th> <th>points</th> </tr>'; while($row = mysqli_fetch_array($result)) {     echo "<tr>";     echo "<td>" . $row['holenumber'] . "</td>";     echo "<td>" . $row['par'] . "</td>";     echo "<td>" . $row['strokeindex'] . "</td>";     echo "<td> <input required type=text /></td>";     echo "<td> </td>";     echo "</tr>"; } echo "</table>"; mysqli_close($con); ?> </body> </html> 

what looking know can pass 2 variables through @ point below:

xmlhttp.open("get","generatesc.php?cvalue="+str,true); 

and if how second variable.

edit

 <script> function showcourse(course, user) {      var user = document.getelementbyid('selectuser').value;     var course = document.getelementbyid('selectcourse').value;      if (user || course == "") {         document.getelementbyid("txthint").innerhtml = "";         return;     } else {          if (window.xmlhttprequest) {             // code ie7+, firefox, chrome, opera, safari             xmlhttp = new xmlhttprequest();         } else {             // code ie6, ie5             xmlhttp = new activexobject("microsoft.xmlhttp");         }         xmlhttp.onreadystatechange = function() {             if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {                 document.getelementbyid("txthint").innerhtml = xmlhttp.responsetext;             }         }         xmlhttp.open("get","generatesc.php?course="+course+"&user="+user,true);         xmlhttp.send();     } } </script> 

i've updated have above... problem how button work 2 variables?

                 <form> <select id="selectcourse">    <option value = "">select course</option>   <?php foreach($courses $c){     echo $c; }?> </select>  <select id="selectuser" >     <option value = "">select user</option>     <?php foreach($users $u){         echo $u;     } ?>     </select>  <button type="button" >click me</button> </form> 

just fetch values both dropdowns , concatinate url:

var user = document.getelementbyid('selectuser').value; var course = document.getelementbyid('selectcourse').value; xmlhttp.open("get","generatesc.php?cvalue="+course+"&user="+user,true); 

then generatesc php script of course have fetch value user parameter , work well.

$_get['user'] fetch value user parameter.