Hello
I have a category select menu, what I want is to when user select a category I have to repopulate the sub category select menu with items
can I do this with out AJAX, it does not matter if there is a another request
can I use a onchange to call another php function?
Poulate a option field on change
Moderator: General Moderators
Re: Poulate a option field on change
I a word no.
If you want to use PHP you will have to use AJAX, but essentially the loading and repopulation of the select menu with the "sub category" will have to be javascript.
If you want to use PHP you will have to use AJAX, but essentially the loading and repopulation of the select menu with the "sub category" will have to be javascript.
- aceconcepts
- DevNet Resident
- Posts: 1424
- Joined: Mon Feb 06, 2006 11:26 am
- Location: London
Re: Poulate a option field on change
You could use javascript.
This is just an example taken from dreamweaver:
This is just an example taken from dreamweaver:
Code: Select all
<form name="form" id="form">
<select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
<option value="dghdf.php">dghdf</option>
</select>
</form>
Re: Poulate a option field on change
Yes you would need to use AJAX.
Here is an example using AJAX and php so you can populate your options using a db.
Hope this gets you on your way. there are 3 files test.php,functions.js,CategoryDropDown.php
test.php
CategoryDropDown.php
functions.js
Hope This Helps 
Here is an example using AJAX and php so you can populate your options using a db.
Hope this gets you on your way. there are 3 files test.php,functions.js,CategoryDropDown.php
test.php
Code: Select all
<?php
echo "<script type='text/javascript' src='functions.js'></script>";
echo "<select class='sel' id='SelCategory' name='SelCategory' onchange='CategoryChange()'><option value=''>Select A Category</option>";
echo "<option value='1'>Category 1</option><option value='2'>Category 2</option><option value='3'>Category 3</option>";
echo "</select>";
echo "<br/><br/>";
echo "<select class='sel' id='SelSubCategory' name='SelSubCategory' onchange='SubCategoryChange()' disabled='true'><option value=''>Select A Sub-Category</option></select>";
echo "<br/><br/>";
echo "<input id='cmdedit' type='submit' value='Update' disabled='true' />";
?>
Code: Select all
<?php
//Checks There Is A Category
if(isset($_GET["Category"]))
{
//Returns Sub-Categorys Based on the Category, Recommended this comes from a MySQL query
if($_GET["Category"] == 1)
{
echo "Sub-Cat 1,Sub-Cat 2,Sub-Cat 3,";
}
elseif($_GET["Category"] == 2)
{
echo "Sub-Cat 4,Sub-Cat 5,Sub-Cat 6,";
}
elseif($_GET["Category"] == 3)
{
echo "Sub-Cat 7,Sub-Cat 8,Sub-Cat 9,";
}
}
?>
Code: Select all
//Create a boolean variable to check for a valid IE instance.
var xmlhttp = false;
//Check if we are using IE.
try
{
//If the javascript version is greater than 5.
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
//If not, then use the older active x object.
try
{
//If we are using IE.
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E)
{
//Else we must be using a non-IE browser.
xmlhttp = false;
}
}
//If we are using a non-IE browser, create a JavaScript instance of the object.
if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
xmlhttp = new XMLHttpRequest();
}
function CategoryChange()
{
var CategoryDropDown = document.getElementById("SelCategory");
var SubCategoryDropDown = document.getElementById("SelSubCategory");
//lock Submit Button
try
{
document.getElementById("cmdedit").disabled = true;
}
catch(e){}
if(CategoryDropDown.value != "")
{
//Clear and Enable SubCategoryDrop Down
SubCategoryDropDown.disabled = false;
SubCategoryDropDown.options.length = 1;
//Call A PHP Page which queries MySQL DB and returns a comma seperated list
var serverPage = "CategoryDropDown.php?Category=" + CategoryDropDown.value;
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
if(xmlhttp.responseText != "")
{
//PHP Page Response
//alert(xmlhttp.responseText);
var list = new Array();
list = xmlhttp.responseText.split(",");
var i=0;
while(i < list.length-1)
{
//Fill Type Drop Down With Appropriate Data
myOption = new Option(list[i], list[i], true, true);
SubCategoryDropDown.options[SubCategoryDropDown.options.length] = myOption;
i++;
}
//Set The List To Look First Item (Header)
SubCategoryDropDown.options[0].selected = true;
}
}
}
xmlhttp.send(null);
}
else
{
//Clear and Disable SubCategory Drop Down
SubCategoryDropDown.disabled = true;
SubCategoryDropDown.options.length = 1;
}
}
function SubCategoryChange()
{
var SubCategoryDropDown = document.getElementById("SelSubCategory");
if(SubCategoryDropDown.value != "")
{
//lock Submit Button
document.getElementById("cmdedit").disabled = false;
}
else
{
//lock Submit Button
document.getElementById("cmdedit").disabled = true;
}
}
Re: Poulate a option field on change
Thank you