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:
include_once ("include/stdlib.php");
    include (
<head> <title> test page </title>
<script language="javascript"  type="text/javascript">

function createRequestObject() {

   var req;

      // 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;


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;


function handleResponse(element) {

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

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

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






echo "<form>";    
"<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'];
"<option id='$id' value='$id'> $category";

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




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,