Jump to content

change select menu depending on previous select menu


jasonc

Recommended Posts

I have two select menus and depending on what the first is selected will depend on what is shown in the second.

 

say a1 is selected then aa1 to aa2 is in the second menu,

if b1 is selected then the second menu list would be bb1 to bb4  for example

 

Been searching around and seem to think it is gonna be ajax that is needed here.

 

I just do not know enough to make a start on more than a simple example code below.

 

the first select menu will be got from mysql table called 'names', on change the second select menu list will contant 'relations' which are taken from another table called 'relations'

 

can anyone give some idea on how i make a start so i can not just get the code but learn how it works as well.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<form name="form1" method="post" action="">
  <p>
    <select name="names">
      <option value="a1">a1</option>
      <option value="b1">b1</option>
      <option value="c1">c1</option>
    </select>
  </p>
  <p>
    <select name="relations">
      <option value="aa1">aa1</option>
      <option value="aa2">aa2</option>
    </select>
  </p>
</form>
</body>
</html>

I have found the following code and wish to have it do a POST instead of the GET

 

can someone tell me what needs changing so this does a POST

 

ajax.php

<?php
if (is_numeric($_GET['client_id'])) {
    include("database.php");
    $query="SELECT * FROM `client_addresses` WHERE `client_id` = '". db_input($_GET['client_id']) ."'";
    $result=mysql_query($query);
?><select name="client_address">
    <option>Select address</option><?
    while( $res_array = mysql_fetch_assoc($result) ) {
        echo "<option value=\"".$res_array['client_address']."\">".$res_array['client_address']."</option>";
    } ?>
</select>
<?
}
?> 

 

index.php

<html>
<head>
<script language="JavaScript" type="text/javascript">
function display_data(client_id) { 
    xmlhttp=GetXmlHttpObject();
    if (xmlhttp==null) {
        alert ("Your browser does not support AJAX!");
        return;
    } 
    var url="ajax.php";
    url=url+"?client_id="+client_id;
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") {
            document.getElementById('employ_data').innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
}
function GetXmlHttpObject() {
    var xmlhttp=null;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlhttp=new XMLHttpRequest();
    }
    catch (e) {
        // Internet Explorer
        try {
            xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlhttp;
}
</script>
</head>
<body>
<form>
<select name="client_name" onchange="display_data(this.value);">
    <option>Select client</option>
    <?php
    include("database.php");
$customer_id = "11";
    $query="SELECT * FROM `client_names`";// WHERE `customer_id` = '". $customer_id ."'
    $result=mysql_query($query);
    while( $res_array = mysql_fetch_assoc($result) ) {
        echo "<option value=\"".$res_array['client_id']."\">".$res_array['client_id']."</option>";
    }
    ?>
</select>
<div id="employ_data"><div>
</form>
</body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.