Page 1 of 1

Poulate a option field on change

Posted: Fri Mar 28, 2008 3:42 am
by kusal
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?

Re: Poulate a option field on change

Posted: Fri Mar 28, 2008 4:22 am
by mchaggis
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.

Re: Poulate a option field on change

Posted: Fri Mar 28, 2008 4:24 am
by aceconcepts
You could use javascript.

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

Posted: Fri Mar 28, 2008 4:48 am
by N1gel
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

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' />";
 
?>
 
CategoryDropDown.php

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,";
    }
}
?>
 
functions.js

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;
            }
        }
 
Hope This Helps :D

Re: Poulate a option field on change

Posted: Fri Mar 28, 2008 5:20 am
by kusal
Thank you