Ajax element update form problem!

IER506 · July 24, 2010

Good morning to everyone. I've started studying ajax these days but I'm stuck in something!

What I was trying to achieve is the following:

1.When the page loads a php function is called and a <select> menu is generated.

2.Then I generate another <select> menu via ajax. A simple js function sends the value of the menu in step one to a php script and as a reply I have my new menu.

3.Then I want a third menu to be generated via ajax again. I want to send the previous two values to another php script and get the menu as a reply.

Also I want the following two things to happen:

4.When I change the first,the values of the second and the third should change.

5.When I change the second, the values of the third should change.

Steps 1 and 2 work fine!Step 4 works partially(only the second menu is updated). I think it should be easy but my brain is stuck!

This is my code:

<?php
//here I call the function for the first menu!
include 'functions/menu1.php';
?>

<html>
<head>

<script type="text/javascript">
function updateorg()
{
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("org").innerHTML=xmlhttp.responseText;
    }
  }

var des = document.getElementById('des').value;

xmlhttp.open("GET","org_ajax.php?ut=users&us=test&de="+des,true);
xmlhttp.send();
}

</script>

<script type="text/javascript">

function updatetype()
{
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("type").innerHTML=xmlhttp.responseText;
    }
  }

var des = document.getElementById('des').value;
var org = document.getElementById('org').value;

xmlhttp.open("GET","menu_types_db_ajax.php?ut=users&us=george&de="+des+"&or="+org,true);
xmlhttp.send();
}


</script>


</head>
<body onLoad="updateorg();">
<form>
MENU 1:
<select name="des" id="des" onchange="updateorg()">
<?php generate_destination_menu_bydb(localhost,george,123456,main,maindb,users,george); ?>
</select><br>
MENU 2:
<select name="org" id="org" >
</select><br>
MENU 3:
<select name="typ" id="type">
</select>
</form>
</body>
</html>

I've tried to use onchange="updatetype()" to some elements but the results are the same. I cannot achieve what I want! Any help is really appreciated.

Sign In

Ajax element update form problem!

Recommended Posts

IER506

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information