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>

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.