(ajax + php + html) forms without refreshing

[mhax]

Hi, i just registered 30 minutes ago, so i'm quite new to the forum.
I hope someone will be able to help me with my newbie problem hehe!

On my page i have 1 input box, 1 independant dropdown list, and 2 dependant dropdown list.

I got the 2 dependant dropdown list to work, but each time i switch the first one, the page is refreshing, and it's a problem because all the text in the input box dissapear and i have to reselect the selection in the independant dropdown list.
All the infos of the dropdown list are selected from 3 mysql table.

table for the independant dropdown list is : tbl_region(id_region, region)
table for the first dependant dropdown list is : tbl_category(id_category,category)
table for the second dependant dropdown list is : tbl_subcategoy(id_subcategory,id_category,subcategory).

The forms are in a table and look like that:
Name - (the input box)
Regon - (independant dropdown list)
Category - (first dependant dropdown list)
SubCategory - (Second dependant drop down list)

I saw some demo using something called AJAX while searching on google. I tried some of them and i was not able to make them work(I'm using XAMPP). I hope it's simple for you guys hehe! If you have questions, just ask me!

[djjjozsi]

then lets try this:

http://php-ajax-code.blogspot.com/2007/07/ajax-triple-dropdown-with-states-cities.html

in the php, which create the dropdown lists, you could write a value recognise to select the previous selected data.

[mhax]

thanks for the link! i played a little bit with the code, and the seconde dependant dropdown is not refreshing...I didn't try to had an input box since the second dropdown is not working properly, i hope to find a solution!

so here the state.php

<?
//set IE read from page only not read from cache
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header ("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");

header("content-type: application/x-javascript; charset=iso-8859-1");

$data=$_GET['data'];
$val=$_GET['val'];

//set database
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname    = "bd_outil";
mysql_pconnect($dbhost,$dbuser,$dbpass) or die ("Unable to connect to MySQL server");

if ($data=='groupe') {  // first dropdown
  echo "<select name='groupe' onChange=\"dochange('nom_groupe', this.value)\">\n";
  echo "<option value='0'>Select groupe</option>\n";
  $result=mysql_db_query($dbname,"select `id_groupe`, `nom_groupe` from tbl_groupe order by `id_groupe`");
  while(list($id, $name)=mysql_fetch_array($result)){
       echo "<option value=\"$id\" >$name</option> \n" ;
  }
} else if ($data=='sous_groupe') { // second dropdown
  echo "<select name='sous_groupe' >\n";
  echo "<option value='0'>Select sous-groupe</option>\n";                   

  $result=mysql_db_query($dbname,"SELECT `id_sous_groupe`, `nom_sous_groupe` FROM tbl_sous_groupe WHERE `id_sous_groupe` = 

'$val' ORDER BY `id_sous_groupe` ");
  while(list($id, $name)=mysql_fetch_array($result)){
       echo "<option value=\"$id\" >$name</option> \n" ;
  }
}
echo "</select>\n";
?>

and the state_dropdown.php

<?     

     echo "<form name=sel>\n";
     echo "Groupe : <font id=groupe><select>\n";
     echo "<option value='0'></option> \n" ;
     echo "</select></font>\n";

 echo "Sous-groupe : <font id=sous_groupe><select>\n";
 echo "<option value='0'></option> \n" ;
 echo "</select></font>\n";
?>

<script language=Javascript>
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP");  } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
try { return new XMLHttpRequest();          } catch(e) {} //Native Javascript
alert("XMLHttpRequest not supported");
return null;
};

function dochange(src, val) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
 if (req.readyState==4) {
      if (req.status==200) {
           document.getElementById(src).innerHTML=req.responseText; //retuen value
      }
 }
};
req.open("GET", "state.php?data="+src+"&val="+val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
}

window.onLoad=dochange('groupe', -1);         // value in first dropdown
</script>

[mhax]

i'm getting this error after choosing a value in the first drop down :

Line : 23
Character : 12
Error : 'document.getElementById(...)' a la valeur Null ou n'est pas un objet.
Code : 0
URL : http://localhost/state_dropdown.php