Needing Your Help,Project is standing due to not solve this problem

[ujjwal]

Hi All,
I am creating another thread here due to that I have posted this problem into php as well as javascript but they are unable to give me right answer.I am depending upon very much on this site help.I have believe that this forum section can help me.I am standing on that part in my project for last 4 days.Plz if you know then help me.
I want 2 select box in one form in one page using php.Now the ist combox printing the value from data base
<p><select name="example" size="1"">
<?
$query="SELECT distinct(areaid),area FROM `destination`";
$result=mysql_query($query)or die(__LINE__.mysql_error());
while ($qu=mysql_fetch_array($result)) {
$areaid=$qu['areaid'];
?>
<option value="<?=$qu['areaid']?>"><? echo $qu["area"] ?></option>
<?}
?></select>Now I want the select value from the upper combo box which supplied to
another select box in such way that
<select name="stage2" size="1">
<?
$query="SELECT country FROM `destination` where areaid=$areaid";
$result=mysql_query($query)or die(__LINE__.mysql_error());
while ($qu=mysql_fetch_array($result)) {
?>
<option value="<?=$qu['country']?>"><? echo $qu["country"] ?></option>
<?}
?>
</select>
What shold be the write code in php?If you want to use javascript then what would be mycode?
PLz Help Me

[Warboss_Alex]

This needs to be two seperate pages. The first page could have a form populated with data from the first query, possibly using "GET" as its method. That'd point to another page which loaded data based on the areaid it was passed, either from GET or wherever.

I doubt you can do it the way you want, since PHP is server-side. You could do it in Javascript, if you preloaded ALL the data from the database and stored it on the page in Javascript variables though.

[Zeldinha]

One way to solve it is using iframes.

Main page:

<form name="main_form">

...

<select name="areaid" id="areaid" onchange="frames['frm'].document.location.href='frame.php?areaid='+areaid.options[areaid.selectedIndex].value">

    <option value="-1"> ... </option>

    // areaid values

</select>

<input type="hidden" name="country" value="">

<iframe name="frm" width="250" height="120" scrolling="no" frameborder="0" src="frame.php"></iframe>

<script>

// Initialize frame with a given value

frames['frm'].document.location.href='frame.php?areaid=<?php echo $areaid; ?>&selected='+document.frm_form.country.value;

</script>

...

</form>

frame.php:

<form name="frm_form">

...

<select name="country" id="country" onchange="top.document.main_form.country.value=country.options[country.selectedIndex].value">

    <option value="-1"> ... </option>

    // country values

</select>

...

</form> 

I tried before with Javascript only, but it's such a headache to preload ALL data I now use this method.

Hope it helps.

[Warboss_Alex]

You'd still have to preload all the data with PHP somehow though.

[Zeldinha]

Originally Posted by Warboss_Alex

You'd still have to preload all the data with PHP somehow though.

You mean with iframes? Not at all... Remember they are two different pages. The main one generates the 1st pulldown and makes the frame page reload everytime the 1st pulldown selected value changes. And reloading sends a petition to the server, that's where PHP kicks in, queries the db and generates the 2nd pulldown.

[sweatje]

take a look at JpSpan

[Warboss_Alex]

Oh, yeah, the iframe source is a php script. Sorry! :S

[ujjwal]

Thank You VERY MUCH Zeldinha.Now It works fine.

[ujjwal]

HI Zeldinha/All,
First time it working very nicely but now the country value is not coming that's why the search engine is not working.Can you say what is the reason the country value is not coming?Thanks for u'r guide.plz again help me.
My code is:
<?php
include('conn.php');
if (isset($_POST['B2'])) {
$coun= empty( $_POST['country'])?'':$_POST['country'];
$date= empty( $_POST['date'])?'':$_POST['date'];
$dura= empty( $_POST['duration'])?'':$_POST['duration'];
$bud= empty( $_POST['budget'])?'':$_POST['budget'];
$submit= empty( $_POST['B2'])?'':$_POST['B2'];
If ( $submit == "Search" ) {
$sub1=substr($date,0,4);
$sub2=substr($date,5,2);
switch ($sub2) {
case $sub2==01:
$sub2="Jan";
break;
case $sub2==02:
$sub2="Feb";
break;
case $sub2==03:
$sub2="Mar";
break;
case $sub2==04:
$sub2="Apr";
break;
case $sub2==05:
$sub2="May";
break;
case $sub2==06:
$sub2="Jun";
break;
case $sub2==07:
$sub2="Jul";
break;
case $sub2==08:
$sub2="Aug";
break;
case $sub2==09:
$sub2="Sep";
break;
case $sub2==10:
$sub2="Oct";
break;
case $sub2==11:
$sub2="Nov";
break;
case $sub2==12:
$sub2="Dec";
break;
}

header("location: /honeymoon/search.php?coun=$coun&dyr=$sub1&dmon=$sub2&dura=$dura&bud=$bud");
}
}
?>
<HTML>
<HEAD>
<TITLE>Destination</TITLE>
<META NAME="Generator" CONTENT="Microsoft FrontPage 4.0">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

</HEAD>

<BODY>
<form name="form1" Method="post" onSubmit="return verify(this)">
<TABLE cellSpacing=2 cellPadding=3 width=500 align=center bgColor=#ffffff
border=0>
<TBODY>
<TR align=left bgColor=#ffe6cc>
<TD class=TDstyle colSpan=2><b>Destination Search Form</b></TD>
</TR>
<TR class=TDstyle bgColor=#eeeeee>
<TD class=TDstyle width="170">
<input onClick="myExample11=open('cal1.htm','myExample11','resizable=no,width=350,hei ght=270');
if (myExample11.opener == null) myExample11.opener = self" type=button value="Date Of Departure" name="button">
</TD>
<TD class=TDstyle width="260">
<input name="date" size=10 READONLY>
<FONT
color=#cc0000><I>Please click to enter date(YYYY/MM/DD)</I></FONT></TD>
</TR>


<TR class=TDstyle bgColor=#eeeeee>
<TD class=TDstyle width="170">
Duration<TD class=TDstyle width="170"><SELECT name="duration"> <OPTION value=""
selected>Select a Duration</OPTION> <OPTION
value=2>One-Three Days</OPTION><OPTION value=3>Three-Five Days</OPTION><OPTION value=4>Five-Seven Days</OPTION><OPTION value=5>Seven-Ten Days</OPTION><OPTION value=6>Ten-Fifteen Days</OPTION><OPTION value=7>More Than Fifteen Days</OPTION></td>
<TR class=TDstyle bgColor=#eeeeee>
<TD class=TDstyle width="170">
Budget<TD class=TDstyle width="170"><SELECT name="budget"> <OPTION value=""
selected>Select a Budget</OPTION> <OPTION
value=2>5000-10000 $</OPTION><OPTION value=3>10000-25000 $</OPTION></td>

<TR class=TDstyle bgColor=#eeeeee>
<TD class=TDstyle width="170">
Destination<TD class=TDstyle width="170">
<select name="areaid" id="areaid"
onChange="frames['frm'].document.location.href='frame.php?areaid='+areaid.options[areaid.selectedIndex].value">
<?
$query="SELECT distinct(areaid),area FROM `destination`";
$result=mysql_query($query)or die(__LINE__.mysql_error());
while ($qu=mysql_fetch_array($result)) {

?>
<option value="<?=$qu['areaid']?>"><? echo $qu["area"] ?></option>
<?}
?>
</select>
<input type="hidden" name="country" value="">
<iframe name="frm" width="250" height="200"
scrolling="no" frameborder="0" src="frame.php"></iframe>
<script>
frames['frm'].document.location.href='frame.php?areaid=<?php echo "$areaid";
?>&selected='+document.frm_form.country.value;
</script> <TR class=TDstyle bgColor=#eeeeee>
<TD class=TDstyle width="170"><TD class=TDstyle width="170"><p align=left>
<input type="submit" value="Search" name="B2"></p></td><tr>
</form>


</BODY>

[ujjwal]

In addition of upper comments of meIt is working means country values are coming in a 2nd combo box very nicely but why it is not selecting?The 1st 2/3 times it is not working but then it is working why this thing is doing in such way?Is it not work from the 1st time?plz solve me
Here is my frame.php:
<?php
include('conn.php');
$areaid= empty( $_REQUEST['areaid'])?'':$_REQUEST['areaid'];
?>
<form name="frm_form">
<TR class=TDstyle bgColor=#eeeeee>
<TD class=TDstyle width="170">
Country</td><td>
<select name="country" id="country"
onchange="top.document.form1.country.value=country.options[country.selectedIndex].value">
<?
$query="SELECT country FROM `destination` where areaid=$areaid";
$result=mysql_query($query)or die(__LINE__.mysql_error());
while ($qu=mysql_fetch_array($result)) {
?>
<option value="<?=$qu['country']?>"><? echo $qu["country"] ?></option>
<?
}
?>
</select>
</form>

[Zeldinha]

Uhm.. Could be a Javascript error...

First, change this:

<script>

frames['frm'].document.location.href='frame.php?areaid=<?php echo "$areaid"; 

?>&selected='+document.frm_form.country.value;

</script>

To this:

<script>

frames['frm'].document.location.href='frame.php?areaid=<?php echo "$areaid"; 

?>&selected='+document.form1.country.value;

</script>

Let's see if it works that way

[ujjwal]

Originally Posted by Zeldinha

Uhm.. Could be a Javascript error...

First, change this:

<script>

frames['frm'].document.location.href='frame.php?areaid=<?php echo "$areaid"; 

?>&selected='+document.frm_form.country.value;

</script>

To this:

<script>

frames['frm'].document.location.href='frame.php?areaid=<?php echo "$areaid"; 

?>&selected='+document.form1.country.value;

</script>

Let's see if it works that way

Sorry to say it doesn't works.Actually the selected country value is not coming in the search.php that's why the result is not coming.If chosen country is store into coun then it works fine.My q is Why the chosen country is not storing into coun variable?Is it the reason that I Used Iframe or any thing else.
Any one plz solved it?

[mjlivelyjr]

This may be a bit complicated but this is the advanced PHP forum so why not. This is also going to be a fairly long post. So just bear with me.

I recently had a similar problem where a client that sold motorcycle gear wanted a way to do a search for products via a chained select (pretty much what you are trying to accomplish). I use to do this by just reloading the page whenever one of the select boxes value's changed. However This causes page scrolling problems and I really wanted the update of the select's to be transparent. So via a little bit of playing around with some autocomplete concepts and after visiting a couple other sites that implemented something similar I came up with a solution that utilized dynamic XML data. So here we go.

Note: The site I am using as an example can be found here: http://www.extreme-helmet.com/store/advanced-search.php

The first part of this involves a way to insert dynamic html into a page without having to reload said page. Obviously you would have to do this with some form of javascript. Now gecko based browsers and IE 5.0+ both have a fairly simple api to import XML data from external files. So first I just created an xml file driven by PHP that contained just my drop down box. Below is the the page that creates manufacturers xml file. Please note I am using Smarty as a templating system, but hopefully you can get the gist of how things are working here.

manufacurer-xml.tpl

<select name="manufacturer" class="t" id="manufacturerSel">
    <option value="">All</option>

    {foreach from=$manufacturers item=manufacturer}
      <option value="{$manufacturer|escape:'html'}">{$manufacturer|escape:'html'}</option>
    {/foreach}

</select>

Some things that you should be aware of. The attributes for the <select> in this file must be identicle with those found on you html/php page. Otherwise you will find things not working all that well.

We'll look at how this page is called in just a bit.

The next thing I had to do was create a cross browser compatible function that would read this xml file into a javascript variable. Now be warned, this part is going to get a little hairy.

function importXML(file, instruction) {
    //if readingfile is set then a file is processing
    if (!readingfile) {
        document.body.style.cursor = 'wait';
        //The mozilla way to load xml
        if (document.implementation && document.implementation.createDocument) {
            xmlDoc = document.implementation.createDocument("", "", null);
            xmlDoc.onload = function() { readXML(instruction); };
        } 
        //The IE way to load xml
        else if (window.ActiveXObject) {
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.onreadystatechange = function () {
                if (xmlDoc.readyState == 4) readXML(instruction)
            };
        }
        //All other browsers lose for now :(
        else {
            alert('The advanced search feature is currently only supported by IE 5.0 and above and Gecko based browsers (Mozilla, Firefox, Safari, etc.');
            return;
        }
        //enforce the lock variables
        scriptlock = true;
        readingfile = true;
        //load the file
        xmlDoc.load(file);
        setTimeout("importXML()", 500);
    }
    else {
        if (scriptlock) {
            setTimeout("importXML()", 500);
        } 
        else {
            readingfile = false;
            document.body.style.cursor = 'auto';
        }
    }
}

function importWrapper(file, instruction) {
    if (readingfile) {
        setTimeout(function () { importWrapper(file, instruction); }, 500);
    } else {
        importXML(file, instruction);
    }
}

As you can see there are two functions here. The most important one is the importXML() function. It takes two variables: file- a path to the xml file (or in our case a php file that outputs xml) that is to be loaded. instruction- the type of data located in the xml file. The other function, importWrapper(), takes the exact same arguments and is actually used as a sort of 'lock' so I don't get any wierd race conditions. I implemented it because really wierd results came about if I was too quick with the drop down menus. Subcategories would get overwritten with manufacturer data, etc. So importWrapper just checks a variable that I use to lock loading of xml files. If the veriable is set then it just waits half of a second to fire the function again.

Now the first thing import function does is checks to make sure the readingfile lock isn't set. So long as it isn't it changes the cursor to the nifty hourglass model and then proceeds to load the xml document.

if (document.implementation && document.implementation.createDocument) {
    xmlDoc = document.implementation.createDocument("", "", null);
    xmlDoc.onload = function() { readXML(instruction); };
}

This code will be executed in most gecko based browsers (mozilla, firefox, safari, etc.) The first line inside of the if statement creates the Gecko XML object and the second line gives a callback function that will be executed when the xml has been fully loaded. readXML() is another custom function I created. Note that the value of instruction has been passed.

else if (window.ActiveXObject) {
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.onreadystatechange = function () {
        if (xmlDoc.readyState == 4) readXML(instruction)
    };
}

This code is pretty much the IE5.0+ version of what I just posted. The xmlDoc.onreadystatechange part is Microsoft's wonderfully convoluted version of Gecko's xmlDoc.onload.

else {
    alert('The advanced search feature is currently only supported by IE 5.0 and above and Gecko based browsers (Mozilla, Firefox, Safari, etc.');
    return;
}

This little bit of code will be fired on any browser that does not support loading of xml.

Then two locking variables, scriptlock and readingfile, are set. As mentioned before the readingfile variable will just prevent any new xml files from being prcessed until the current one has been taken care of. The scriptlock variable was actually introduced to notify me when the readXML() function has finished doing it's thing so I could release the readingfile lock and reset the cursor. I have actually just now come to realize that I should have just put those two lines of code at the end of the readXML() function. I just equate that mistake to long hours and lack of sleep. I guess it can't really be called a mistake either because the thing works :>.

So a broad summary of the importXML() function is that it accepts a filepath for an xml file and an instruction on what kind of data the file contains. It then loads the data and once the data is loaded calls the function readXML()

function readXML(instruction) {
    switch(instruction) {
        case 'categories':
            var newSel = xmlDoc.documentElement;
            var oldSel = document.getElementById('subcategorySel');
            newSel = createElement(newSel);
            if (newSel.attachEvent) {
                newSel.attachEvent("onchange", function() { refreshManufacturers(); });
            }
            oldSel.parentNode.replaceChild(newSel, oldSel);
            break;
        case 'manufacturers':
            //Load the root element (should be the <select>)
            var newSel = xmlDoc.documentElement;
            //Load the old menu
            var oldSel = document.getElementById('manufacturerSel');
            //parse the xml into a valid html element
            newSel = createElement(newSel)
            //make the switch
            oldSel.parentNode.replaceChild(createElement(newSel), oldSel);
            break;
    }
    scriptlock = false;
}

This is the function that actually takes the xml file's contents and gets them into the site. I am just broke down the manufacturers section of the code to save space and the categories part isn't all that different, it just drives the categories select menu.

[code]
function createElement(xmlElement) {
var newElement = document.createElement(xmlElement.nodeName);

for (var i = 0; i < xmlElement.attributes.length; i++) {
newElement.setAttribute(xmlElement.attributes[i].nodeName, xmlElement.attributes[i].nodeValue);
}

for (var i = 0; i < xmlElement.childNodes.length; i++) {
if (xmlElement.childNodes[i].nodeValue == null) {
var childElement = createElement(xmlElement.childNodes[i]);
} else {
var childElement = document.createTextNode(xmlElement.childNodes[i].nodeValue);
}
if (newElement.appendChild) newElement.appendChild(childElement);
else newElement.insertBefore(childElement);
}
return newElement;
}
[code]
The concept of this function is pretty simple. Like I said it just creates an html element out of the xml element. If you don't understand any of the functions feel free to look them up in a DOM reference guide. This is getting long enough as it is for a forum post.

The last thing left to do is to tie this all together.

<script>
function refreshCategories() {
    var categorySel = document.getElementById("categorySel");
    var id = categorySel.options[categorySel.selectedIndex].value;
    importWrapper("as-utilities.php?display=category&id=" + id, 'categories');
}
function refreshManufacturers() {
    //get the chosen category id
    var categorySel = document.getElementById("categorySel");
    var categoryID = categorySel.options[categorySel.selectedIndex].value;
    //get the chosen subcategory id
    var subcategorySel = document.getElementById("subcategorySel");
    var subcategoryID = subcategorySel.options[subcategorySel.selectedIndex].value;
    //and grab that XML file (In Idaho I usually just say "Get-R-Done"
    importWrapper("as-utilities.php?display=manufacturer&subcategory=" + subcategoryID + "&category=" + categoryID, 'manufacturers');
}
</script>
<label for="category">Category:</label>
<select id="categorySel" name="category" class="t" onChange="refreshCategories(); refreshManufacturers();" style="width: 150px;">
    <option value="1" style="width: 150px;">Street / Touring Gear</option>
    <option value="2" style="width: 150px;">Motocross / ATV Gear</option>
    <option value="3" style="width: 150px;">Snowmobile Gear</option>
    <option value="4" style="width: 150px;">Auto Racing Helmet</option>
</select><br class="clear" />

<label for="subcategory">Sub Category:</label>
<select id="subcategorySel" name="subcategory" class="t" onChange="refreshManufacturers();" style="width: 150px;">
    <option value="0" style="width: 150px;">Choose a Category</option>
</select><br class="clear" />

<label for="manufacturer">Manufacturer:</label>
<select id="manufacturerSel" name="manufacturer" class="t" style="width: 150px;">
    <option style="width: 150px;">Choose a Manufacturer</option>
</select>

You will note in the onchange attribute for the category and sub-category fields there are references to the functions refreshCategories() and refreshManufacturers(). Again, I am only going to go into detail with the refreshManufacturers function. The refreshManufacturers function does just what the name reflects. It updates the manufacturer list based on the current values in the category and subcategory fields. The first four lines of the function just pull the values of the two category fields and the second line actually starts the process of retrieving the xml file. as-utilities.php is just a simple page that handles all of the advance search necessities.

as-utilities.php

<?php

include_once 'config/config.php';

require_once 'application/page-controller.php';

require_once 'dao/product.php';



class AdvancedSearchUPage extends PageController {

    function SearchPage($config = null) {

        PageController::PageController($config);

    }



    function prepare() {

        $database = $this->_prepareDatabase('main');



        if (array_key_exists('display', $_GET)) {

            switch ($_GET['display']) {

                case 'category':

                    $category = new Category($database, $this->_configuration->getValue('APP_TABLE_PREFIX'));

                    $category->loadOne($_GET['id']);

                    $categoryList = $category->getCategoryTree(1);

                    $this->_addDataObject($categoryList->returnArray(), 'categories');

                    break;

                case 'manufacturer':

                    $category = new Category($database, $this->_configuration->getValue('APP_TABLE_PREFIX'));

                    if ($_GET['subcategory'] != 0) {

                        $category->loadOne($_GET['subcategory']);

                    } else {

                        $category->loadOne($_GET['category']);

                    }

                    $manufacturers = $category->getManufacturersInCategory();

                    $this->_addDataObject($manufacturers, 'manufacturers');

                    break;

            }

        }

    }

    

    function execute() {

        $template = $this->_prepareTemplateEngine();

        

        if (array_key_exists('display', $_GET)) {

            switch ($_GET['display']) {

                case 'category':

                    $template->assign('categories', $this->_getDataObject('categories'));

                    $template->display('category-xml.tpl');

                    break;

                case 'manufacturer':

                    $template->assign('manufacturers', $this->_getDataObject('manufacturers'));

                    $template->display('manufacturer-xml.tpl');

                    break;

            }

        }

    }

}



header("Content-Type: text/xml");

$controller = new AdvancedSearchUPage($GLOBALS['APP_CONFIG']);

$controller->init();

$controller->prepare();

$controller->execute();

$controller->cleanup();

?>

As you can probably tell from this file the whole site runs on an MVCish pattern.

So hopefully this was insightful for you and gives you some ideas on what you are trying to do.

I apologize for the long post, it's just hard to get things straight from the brain to your fingers in an adept and succinct matter when you have only a 15 minute break to work with :P.

-Mike Lively
http://www.digitalsandwich.com