Update 2nd selection box based on 1st WITHOUT reloading page

Moz · April 2, 2007

Hello,

I'm new to PHP and MySQL and would like some help with a small page I'm trying to write which acts as a search page for a user on my site. Ive been working on this for 4 days now and it's driving me insane - mostly because I don't really know what Im doing and I've cobbled the code together from bits of other code, some shoestrings and a cardboard box. I've spent hours going through many different forums and have tried lots of different ways of achieving this, but for some reason I just can't do it >:(

The page need to load a list of "categories" and a list of "sectors" from my database and provide three drop down boxes for the user to select.

The first drop down box allows the user to select the category, the second allows the user to select a parent ID in the sectors list and I want the third one to allow the user to select a list of sectors whose parent ID matches their selection in the second sector box.

e.g. I would have a sector called Backpacker, ID 80 which has a parent sector called Travel, ID 40 (Travel has parent ID 0).

I would want to display in the second selection box all those sectors that have Parent ID = 0, and in the third selection box I would to display all sectors that have parent ID based on the second selection box.

The user should then press search and this generates a URL to send the user to. I've already written the code to accept the URL and it seems to be working fine, I just need to finish the actual page where the user selects their parameters.

I understand I would be best to update the third box is by using some sort of onchange javascript, but I just want to update that third box, and not refresh the whole page.

From trawling through forums Ive come up with the code below which provides an old-school Java way of a sort of Ajax functionality of updating the calling page without refreshing it. However I don't really understand the Refresh.php page code and don't know how to change it so my code works. I know that the page is definitely calling SOMETHING when the second box is changed as I've run the script from a USB stick and it lighs up to say something is being access when I change the second box.

I'm sorry for the very long code post but I really am new to this (only started building my website 2 weeks ago and had no PHP, Java or MySQL experience before!)

My Full Search PHP code looks like this:

<?php

defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );

if (!class_exists('pxtconfig_db')) {

require_once('components/com_directory/directory.class.php');

require_once('components/com_directory/sef_ext.php');

} else {

global $PXT_CONFIG;

}

# Get Itemid, determine if the directory component is published

$database->setQuery("SELECT id FROM #__menu"

. "\nWHERE link='index.php?option=com_directory'"

. "\nAND published='1'"

. "\nLIMIT 1");

$Itemid = $database->loadResult();

$width = intval( $params->get( 'width', 16 ) );

$text = $params->get( 'text', _SEARCH_BOX );

$moduleclass_sfx = $params->get( 'moduleclass_sfx' );

$advsearch = intval( $params->get( 'advsearch', 1 ) );

$parent_cat = intval( $params->get( 'parent_cat', 0 ) );

$search_button = intval( $params->get( 'search_button', 1 ) );

$url = '';

$wtv = 0;

global $database, $custom404, $mosConfig_sef, $cat_id, $onclickCmd;

$database->setQuery( "SELECT id, name FROM #__dir_cat WHERE published='1' ORDER BY name ASC" );

$allcats = $database->loadObjectList();

$database->setQuery( "SELECT id, name FROM #__dir_sector WHERE published='1' AND parent='0' ORDER BY name ASC" );

$wtvs = $database->loadObjectList();

if ($wtv > 0) {

$database->setQuery( "SELECT id, name FROM #__dir_sector WHERE published='1' AND parent='$wtv' ORDER BY name ASC" );

$sectors = $database->loadObjectList();

}

?>

<script>



</script>

<script type="text/javascript">

function callServer(el) {

var eValue = el.value;

var g_remoteServer = 'refresh.php?value=' + encodeURI(eValue);

var head = document.getElementsByTagName('head').item(0);

var old = document.getElementById('lastLoadedCmds');

if (old) head.removeChild(old);

script = document.createElement('script');

script.src = g_remoteServer;

script.type = 'text/javascript';

script.defer = true;

script.id = 'lastLoadedCmds';

void(head.appendChild(script));

}

</script>

</head>

<html>

<br>

<form action="/index.php" name=f><script defer>

</script>

<table cellpadding=0 cellspacing=0>

<tr valign=top>

<td align=left colspan=3 nowrap>

<input name=option type=hidden value=com_directory>

<input name=page type=hidden value=advsearch>

<input type="hidden" name="Itemid" value="<?php echo $PXT_CONFIG['itemid_main']?>" />

Search for words (leave blank for all): <input maxlength=50 name=query size=30 title="Search" value="">

<br>

</td>

</tr>

<tr>

<td align=Left colspan=3>

Country to Search in <select name="catid">

<?php foreach( $allcats AS $allcat ) { ?>

<option value="<?php echo $allcat->id ?>"><?php echo $allcat->name ?>

<?php } ?>

</select>

<br>

</td>

</tr>

<tr>

<td align=Left colspan=4>

Select which sector you wish to search:

Area:<br>

<select name="wtv" onchange="callServer(this)">

<option value="">[select]</option>

<?php foreach( $wtvs AS $wtv ) { ?>

<option value="<?php echo $wtv->id ?>"><?php echo $wtv->name ?>

<?php } ?>

</select>

Sector:<br>

<select name="sid">

<option value="">[select]</option>

<?php foreach( $sectors AS $sector ) { ?>

<option value="<?php echo $sector->id ?>"><?php echo $sector->name ?>

<?php } ?>

</select>

<input name=btnG type=submit value="Search Database">

</td>

</tr>

<br>

</table></form><p><font size=-2>

<br> <font size=-2>Search ©2007 Work Travel Volunteer</font></p></center></body></html>

My ful Refresh.php page (which is from http://www.bestcodingpractices.com/polling_the_server_client_side-31.html and I haven't changed ) looks like this:

<?php
$CrLf = chr(13) . chr(10);

$opt = $_GET['value'];

switch ($opt) {

case 1:

$Script = "var f_el = document.getElementById('test_text');" . $CrLf .

"f_el.value = 'You selected value ONE, this unchecks the box';" . $CrLf . "f_el = document.getElementById('test_checkbox');" . $CrLf .

"f_el.checked = false;";

break;

case 2:

$Script = "var f_el = document.getElementById('test_text');" . $CrLf . "f_el.value = 'You selected value TWO, notice the box is checked';" . $CrLf . "f_el = document.getElementById('test_checkbox');" . $CrLf . "f_el.checked = true;";

break;

case 3:

$Script = "var f_el = document.getElementById('test_text');" . $CrLf . "f_el.value = 'You selected value THREE, checkbox unchanged';";

break;

default:

$Script = "var f_el = document.getElementById('test_text');" . $CrLf . "f_el.value = '';" . $CrLf .

"f_el = document.getElementById('test_checkbox');" . $CrLf .

"f_el.checked = false;";

}

echo $Script;

?>

Any help is much appreciated!

Thanks,

Moz

emehrkay · April 2, 2007

based on your title, you'll need to use ajax

Moz · April 2, 2007

based on your title, you'll need to use ajax

Hi Emehrkay,

OK, thanks for moving the topic for me. I think that I've found out how to do this using just PHP and Javascript (see post, sorry for it being so lengthy), but possibly it might be better using Ajax? Would I need to "install" Ajax somehow?

Cheers,

Moz

MadTechie · April 2, 2007

ajax is basically javascript so no install needed,

and yes post is a little long

see alpines great post

http://www.phpfreaks.com/forums/index.php/topic,115581.0.html

Sign In

Update 2nd selection box based on 1st WITHOUT reloading page

Recommended Posts

Moz

Link to comment

Share on other sites

emehrkay

Link to comment

Share on other sites

Moz

Link to comment

Share on other sites

MadTechie

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information