title: Send multiple variable with PHP AJAX GET onclick of a button
body: <p>I have two dynamically loaded dropdowns: one containing golf course holes information and another holding users- together the information will be used to generate a scorecard. </p>
  
  <p>When the course is selected and a user is selected I want to click a button and then this will generate the scorecard.</p>
  
  <p>Below is the code for the 'course' dropdown</p>
  
  <pre><code>&lt;?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 FROM courses";
  
      $result = mysqli_query($con, $sql) or die("Error: ".mysqli_error($con));
  
      while ($row = mysqli_fetch_array($result))
      {
          $courses[] = '&lt;option       value="'.$row['courseID'].'"&gt;'.$row['name'].'&lt;/option&gt;';
      } 
       ?&gt; 
  </code></pre>
  
  <p>Below is the code for the 'user' dropdown</p>
  
  <pre><code>&lt;?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 FROM user";
  
      $result = mysqli_query($con, $sql) or die("Error: ".mysqli_error($con));
  
      while ($row = mysqli_fetch_array($result))
      {
      $users[] = '&lt;option value="'.$row['userID'].'"&gt;'.$row['forename'].' '.$row['surname'].'&lt;/option&gt;';
      }
  
       ?&gt; 
  </code></pre>
  
  <p>Below is the HTML code for the dropdowns</p>
  
  <pre><code>&lt;form&gt;
  &lt;select id="selectCourse" onchange="showCourse(this.value)"&gt; 
    &lt;option value = ""&gt;Select Course&lt;/option&gt;
    &lt;?php foreach($courses as $c){
      echo $c;
  }?&gt;
  &lt;/select&gt;
  
  &lt;select id="selectUser" &gt;
      &lt;option value = ""&gt;Select User&lt;/option&gt;
      &lt;?php foreach($users as $u){
          echo $u;
      } ?&gt;
      &lt;/select&gt;
  
  &lt;button type="button" &gt;Click me&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>At the moment I have code that uses the 'onchange' to load the first part of the scorecard which contains the hole information about that course. I am having problems changing this to the click of the button and also consider another variable from the user dropdown. </p>
  
  <p>The below code is taken from W3Schools which loaded the hole information correctly based on 'onchange'.</p>
  
  <pre><code>   &lt;script&gt;
  function showCourse(str) {
      if (str == "") {
          document.getElementById("txtHint").innerHTML = "";
          return;
      } else { 
          if (window.XMLHttpRequest) {
              // code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp = new XMLHttpRequest();
          } else {
              // code for IE6, IE5
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange = function() {
              if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
                  document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
              }
          }
          xmlhttp.open("GET","generateSC.php?cValue="+str,true);
          xmlhttp.send();
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The below code shows the first half of the scorecard being generated from the selection of the first dropdown. </p>
  
  <pre><code>    &lt;?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 FROM holes WHERE courseID= '".$cValue."'";
  $result = mysqli_query($con,$sql) or die("Error: ".mysqli_error($con));
  
  
  echo '&lt;div class="scorecardTable"&gt;
  &lt;table&gt;
  &lt;tr&gt;
  &lt;th&gt;HoleNumber&lt;/th&gt;
  &lt;th&gt;Par&lt;/th&gt;
  &lt;th&gt;Stroke Index&lt;/th&gt;
  &lt;th&gt;Score&lt;/th&gt;
  &lt;th&gt;Points&lt;/th&gt;
  &lt;/tr&gt;';
  while($row = mysqli_fetch_array($result)) {
      echo "&lt;tr&gt;";
      echo "&lt;td&gt;" . $row['holeNumber'] . "&lt;/td&gt;";
      echo "&lt;td&gt;" . $row['par'] . "&lt;/td&gt;";
      echo "&lt;td&gt;" . $row['strokeIndex'] . "&lt;/td&gt;";
      echo "&lt;td&gt; &lt;input required type=text /&gt;&lt;/td&gt;";
      echo "&lt;td&gt; &lt;/td&gt;";
      echo "&lt;/tr&gt;";
  }
  echo "&lt;/table&gt;";
  mysqli_close($con);
  ?&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What I am looking to know is can I pass two variables through at this point below: </p>
  
  <pre><code>xmlhttp.open("GET","generateSC.php?cValue="+str,true);
  </code></pre>
  
  <p>and if so how would I get the second variable. </p>
  
  <p><strong>EDIT</strong></p>
  
  <pre><code> &lt;script&gt;
  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 for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp = new XMLHttpRequest();
          } else {
              // code for IE6, IE5
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange = function() {
              if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
                  document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
              }
          }
          xmlhttp.open("GET","generateSC.php?course="+course+"&amp;user="+user,true);
          xmlhttp.send();
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I've updated what I have above... the problem now is how do i get the button to work with the two variables?</p>
  
  <pre><code>                 &lt;form&gt;
  &lt;select id="selectCourse"&gt; 
    &lt;option value = ""&gt;Select Course&lt;/option&gt;
    &lt;?php foreach($courses as $c){
      echo $c;
  }?&gt;
  &lt;/select&gt;
  
  &lt;select id="selectUser" &gt;
      &lt;option value = ""&gt;Select User&lt;/option&gt;
      &lt;?php foreach($users as $u){
          echo $u;
      } ?&gt;
      &lt;/select&gt;
  
  &lt;button type="button" &gt;Click me&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>