Hello everyone:

I am having a really annoying problem with javascript and calling a function. I have asked many people but no one has been able to help me, but I still believe there is a simple solution somewhere.


This is how it works. I have a select box on a page. When onChange event is executed a function is called which sends a http request. The code returned is echo'd to produce another select box with more options.

This all works perfectly. The problem begins when I want to have two select box's output but with different names. So they have the same options, the same text, just different names. Simple as that. However I can't get it to work. Code as follows:


PHP Code:
<?php
    
include_once ("include/stdlib.php");
    include (
"include/stdcfg.php");
?>
<html>
<head> <title> test page </title>
<script language="javascript"  type="text/javascript">

function createRequestObject() {

   var req;

   if(window.XMLHttpRequest){
      // Firefox, Safari, Opera...
      req = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      // Internet Explorer 5+
      req = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      // There is an error creating the object,
      // just as an old browser is being used.
      alert('Problem creating the XMLHttpRequest object');
   }

   return req;

}

// Make the XMLHttpRequest object
   var http = createRequestObject();

function sendRequest() {
   // Open PHP script for requests
   var mainCategory = document.getElementById("main_category").value;
   http.open('get', 'getSubCategories.php?name=sub_category&param='+mainCategory);
   http.onreadystatechange = handleResponse;
   http.send(null);
   
   sendRequest;

}

function sendRequest2() {
   // Open PHP script for requests
   var mainCategory = document.getElementById("main_category").value;
   http.open('get', 'getSubCategories.php?name=second_sub_category&param='+mainCategory);
   http.onreadystatechange = handleResponse;
   http.send(null);

}


function handleResponse(element) {

   if(http.readyState == 4 && http.status == 200){

      // Text returned FROM the PHP script
      var response = http.responseText;
    alert(http.responseText);

      if(response) {
         // UPDATE ajaxTest content
         document.getElementById(element).innerHTML = response;
      }

   }

}

</script>

</head>

<body>

<?php    
    
echo "<form>";    
            echo 
"<select id='main_category' name='main_category' onChange='sendRequest();'>";
            
$result runQuery("SELECT * FROM categories WHERE parent_category = ''");
            
            while (
$row mysql_fetch_array($result)) {
                
$id $row['id'];
                
$category $row['category'];
                echo 
"<option id='$id' value='$id'> $category";
            }
            echo 
"</select>";

    
    echo 
"<div id='sub_category'></div>";

    echo 
"</form>";


?>

</body>
</html>

There we are then. I've tried everything that I can think off.

Originally I copied the code to call and create the select boxes, but that didn't work. I then tried giving the function a parameter, so I could call it twice but with a different name given:

<select onChange='sendRequest('box_1'); sendRequest('box_2');'>

That didn't work. I then tried coping and pasting the function sendRequest to sendRequest2, and calling the functions after one another - still doesn't work.

I've been stuck on this for 2 days now, and still no luck. As I said, I'm sure there must be a simple solution.

Simplicity is the key, as I have only just started learning ajax and even js too.


Thanks for all your help,
Gary.