1 (edited by buntu 2008-12-29 5:39:10 PM)

Topic: Help ajax select

Hello. Found a lesson for "ajax select" on http://www.w3schools.com/php/php_ajax_xml.asp.

I modified the script.
index.php

<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
var xmlHttp
function showmenu(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="menu_select.php"
url=url+"?q="+str
url=url+"&"+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 {
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}

function showmenu2(str)
{
if (menu.value=2) {
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="menu_select.php"
url=url+"?p="+str
url=url+"&"+Math.random()
xmlHttp.onreadystatechange=stateChanged2 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
}

function stateChanged2() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txt2Hint").innerHTML=xmlHttp.responseText 
 } 
}



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>
<form> 
<table border="0" cellpadding="4" cellspacing="0" width="100%">
    <tr>
    <td>select module: <select name="menu" id="menu" onchange="showmenu(this.value)">
<option></option>
<option value="1">News</option>
<option value="2">Article</option>
<option value="3">page</option></select>
<div id="txtHint"></div>
<div id="txt2Hint"></div></td>
    </tr>
</table>
</form>
</body>
</html>

menu_select.php

<?php
if(isset($_GET['q']))
{
if($_GET['q'] == '1') {
// show select news
echo "please select news: <select name='news'>\n"
    ."<option></option>\n"
    ."<option value='1'>NEWS 1</option>\n"
    ."<option value='2'>NEWS 2</option>\n"
    ."<option value='3'>NEWS 3</option>\n"
    ."</select><br /><input type='submit' value='Save'/>";
} elseif($_GET['q'] == '2') {
// show select category
echo "please select category: <select name='cat_stat' onchange=\"showmenu2(this.value)\">\n"
    ."<option></option>\n"
    ."<option value='1'>category 1</option>\n"
    ."<option value='2'>category 2</option>\n"
    ."<option value='3'>category 3</option>\n"
    ."</select>";
} elseif($_GET['q'] == '3') {
// show select page
echo "select page: <select name='page'>\n"
    ."<option></option>\n"
    ."<option value='1'>Page 1</option>\n"
    ."<option value='2'>Page 2</option>\n"
    ."<option value='3'>Page 3/option>\n"
    ."</select><br /><input type='submit' value='Save'/>";
}
}
// show select article
if(isset($_GET['p']))
{
echo "select article: <select name='stat'>\n"
    ."<option></option>\n"
    ."<option value='1'>article 1</option>\n"
    ."<option value='2'>article 2</option>\n"
    ."<option value='3'>article 3</option>\n"
    ."</select><br /><input type='submit' value='Save'/>";
}

?>

But now I have a problem. If you choose the first <select name=menu> second paragraph ( 'Article'), then select the second <select name=cat_stat> any item that appears third <select name=stat>. Since then click <select name=menu> news or page is <select name=stat> remains.

Help solve this problem. Please

Re: Help ajax select

You just need to blank out the txt2Hint div in stateChanged():

function stateChanged() {
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
        document.getElementById("txtHint").innerHTML=xmlHttp.responseText
        if (document.getElementById("txt2Hint")) document.getElementById("txt2Hint").innerHTML = ''; // Add this line.
    }
}

Re: Help ajax select

Thank you very much. However, I found a solution to this problem

function showmenu(str) {
....
document.getElementById("txt2Hint").innerHTML = ""; // Add this line.
var url="menu_select.php"