Poulate a option field on change

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
kusal
Forum Newbie
Posts: 14
Joined: Mon Oct 22, 2007 12:12 pm

Poulate a option field on change

Post 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?
User avatar
mchaggis
Forum Contributor
Posts: 150
Joined: Mon Mar 24, 2003 10:31 am
Location: UK

Re: Poulate a option field on change

Post 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.
User avatar
aceconcepts
DevNet Resident
Posts: 1424
Joined: Mon Feb 06, 2006 11:26 am
Location: London

Re: Poulate a option field on change

Post 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>
 
User avatar
N1gel
Forum Commoner
Posts: 95
Joined: Sun Apr 30, 2006 12:01 pm

Re: Poulate a option field on change

Post 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
kusal
Forum Newbie
Posts: 14
Joined: Mon Oct 22, 2007 12:12 pm

Re: Poulate a option field on change

Post by kusal »

Thank you
Post Reply