Ajax with 2 drop down menus

Question

I have 2 drop down menus. After a user has selected an option from each I wish for an answer to be generated by AJAX. I can do this with just one drop down using the example found here:

http://www.w3schools.com/php/php_ajax_database.asp

I have followed some suggestions to try and modify the script for 2 dropdowns, however I have been unsuccessful. It seems that the data is not being posted to the getuser.php page.

My HTML code page is as follows:

<?php
  require('includes/application_top.php');
?>

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function showUser(current_size, current_shoe)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
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 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getuser.php?size="+current_size"&shoe="current_shoe);
xmlhttp.send();
}
</script>
</head>
<body>

   <?php
    $query = "SELECT products_name, products_shoe_size FROM products_description WHERE language_id = 1 and products_shoe_size != '' ";
    // Execute it, or return the error message if there's a problem.
    $result = mysql_query($query) or die(mysql_error());

    ?>

   <form> 
        <?php

        $dropdown = "<select name='current_shoe' id='current_shoe'><option value=''>Select the model of your current shoes:</option>";
    while($row = mysql_fetch_assoc($result)) {
      $dropdown .= "\r\n<option value='{$row['products_shoe_size']}'>{$row['products_name']}</option>";
    }
    $dropdown .= "\r\n</select>";
    echo $dropdown;

    ?>

 <select name="current_size" id="current_size" onchange="showUser(Document.getElementById('current_size').value, Document.getElementById('current_shoe').value)">
<option value="">Select the size of your current shoes:</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
<option value="3">3</option>
<option value="3.5">3.5</option>
<option value="4">4</option>
<option value="4.5">4.5</option>
<option value="5">5</option>
<option value="5.5">5.5</option>
<option value="6">6</option>
<option value="6.5">6.5</option>
<option value="7">7</option>
<option value="7.5">7.5</option>
<option value="8">8</option>
<option value="8.5">8.5</option>
<option value="9">9</option>
<option value="9.5">9.5</option>
<option value="10">10</option>
<option value="10.5">10.5</option>
<option value="11">11</option>
<option value="11.5">11.5</option>
<option value="12">12</option>
<option value="12.5">12.5</option>
<option value="13">13</option>
</select>

</form>

<br />
<div id="txtHint"><b>Sizing info will be listed here.</b></div>

</body>
</html> 
  <?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>

I'm guessing that the problem can be found in one of these lines of code:

function showUser(current_size, current_shoe)

xmlhttp.open("GET","getuser.php?size="+current_size"&shoe="current_shoe);

 <select name="current_size" id="current_size" onchange="showUser(Document.getElementById('current_size').value, Document.getElementById('current_shoe').value)">

If anyone has any idea what I'm doing wrong I will be eternally grateful. I'm fast running out of hair.

Answer 1

Firstly, when you call the showUser function in the change event handler, you need to use document.getElementById , not Document.getElementById (notice the lower-case d - variables in JavaScript are case sensitive).

Secondly, where is str defined? In the showUser function you check to see if it's an empty string, but if it's not defined that's going to throw a ReferenceError .

Aside from that, it appears you never delcare the xmlhttp variable, so it will leak into the global scope, which is bad practice. You should declare every variable with the var keyword at the top of it's scope.

Ajax with 2 drop down menus

Question

1 answers

solution1
1 2011-10-09 00:01:43

Ajax with 2 drop down menus

Question

1 answers

solution1 1 2011-10-09 00:01:43

solution1
1 2011-10-09 00:01:43