Options in a select element depend on selected value of another select element

[fjm]

Hello all. I am making an interface in php that will draw data from a mysql database. What I have started doing is the html, this is what I know well. php is a different story though.

I have reached a point where I am looking at the various forms I have created and thinking about some of the drop down boxes and how the user will be able to enter the data accordingly. I have throughout the database a lot of independant tables. The purpose of these tables is to provide data to a drop down box so the user can choose the desired data. For example:

 
 district_table 
district
 
 sector_table
district
sector
 

Now, in my html, I have different input and select tags for the data. Some will be entered into the input fields and some will be used from the drop down boxes. Such as:

 <table> 
<tr>
<td><select class="dated" style="width: 99%" name="sector"><option value="1" /><option value="2" /></select></td>
</tr>
<tr>
<td><select class="dated" style="width: 99%" name="district"><option value="1" /><option value="2" /></select></td>
</tr>
</table>
 

In my examples above, I need the "district" to dictate the sector. In other words, a district has many sectors but a single sector belongs to only one district.

In order to force php to give the results of the coorasponding sectors, do I need to have dependant dropdown boxes? I hope I am making myself clear on this.

I figured I had better get some clairification now before I waste a lot of time coding something that may not even work.

Thanks.

[pbmods]

Changed thread title to better describe the problem (did you know that threads whose titles contain phrases such as 'help with' actually get FEWER responses?).

Heya, fjm.

If I understand what you're saying, when the User selects a value from the first drop down box, you want the values of the second drop down box to change depending on what that selected value is. Is this correct?

There are a couple of ways of doing this. You can reload the page and handle everything via PHP, or you can use an AJAX call and take care of the display using JavaScript.

[EDIT: As an aside, since most languages read left-to-right, it might make more sense for your Users if 'district' were on the left and 'sector' were on the right instead of the other way around.]

[fjm]

Changed thread title to better describe the problem (did you know that threads whose titles contain phrases such as 'help with' actually get FEWER responses?).

Thanks for the advice on titleing my post. I will keep that in mind for the next time. :)

If I understand what you're saying, when the User selects a value from the first drop down box, you want the values of the second drop down box to change depending on what that selected value is. Is this correct?

Yes, you are correct. I need a set of dependant drop down boxes. I have googled this and have came up empty-handed. I have run across a lot of posts where people are trying to do the same thing but nobody has been successful. (At least I haven't found one yet) Lots of stuff for asp but not for php.

There are a couple of ways of doing this. You can reload the page and handle everything via PHP, or you can use an AJAX call and take care of the display using JavaScript.

Well, I have looked into ajax and it is out of the question for me. I have absolutely no javascript knowledge and the tutorials I have come across are not for the faint at heart. The tutorails also assume you have been programming in js for years. I really couldn't grasp any of it.

php is different though. I would rather use php if at all possible. Is there a tutorial or a snippet you can point me to?

As an aside, since most languages read left-to-right, it might make more sense for your Users if 'district' were on the left and 'sector' were on the right instead of the other way around.]

Yes, your right, I just recreated that to show my html. It is actually stacked one on top of the other. Like so:

District
Sector

Is there maybe an easier way to do this. Maybe without even using javascript or ajax?>

Thanks for your help!

[bonski]

Is there maybe an easier way to do this. Maybe without even using javascript or ajax?

yes... you can use PHP to generate a javascript... i think javascript is essential 'cause you're dealing with forms..

ill be back with a script.. ^___^

[fjm]

yes... you can use PHP to generate a javascript... i think javascript is essential 'cause you're dealing with forms..

ill be back with a script.. ^___^

Hey Bonski, Thank you!!! I am *still* looking for something and haven't found anything. I did find one script that was ported to Postgres but it is above my head. There are too many things to change and my programming level is 0 at the present time. :(

[bonski]

sorry... i was having lunch..^____^

now.. suppose we have this tables from database.. table 1 is category and table 2 is brand... so the option in the first drop down list should return the following brands on the second drop down list if the category was selected.

table 1: category
 
cat_id         cat_name
 
1              surfing
2              skimboarding
3              skateboarding
 
 
table 2: brand
 
brand_id      cat_id        brand_name
 
1                  2              victoria
2                  1             quiksilver
3                  1             billabong
4                  3            zero skateboards
5                  2            exile

ok so here's the code.... i made this one.. but i modify it just now.. so that it would be clear.. ^___^.. now... save this as a php file... so if you have question just let me know.. ok... have fun...

[PHP]//form_category.php
<html>
<head>
<?php

$a = 0;
$cat_sql = "SELECT * FROM category";
$cat_qry = mysql_query($cat_sql);
while($cat_row = @mysql_fetch_array($cat_qry, MYSQL_ASSOC)){
$cat_id[$a] = $cat_row['cat_id'];
$cat_name[$a] = $cat_row['cat_name'];
$a++;
}

echo '<script language="JavaScript" type="text/JavaScript">

function selectCategory(){

removeAllOptions(document.form_name.brand);';

for($a = 0; $a<sizeof($cat_id); $a++){

echo 'if(document.form_name.category.value == "'.$cat_id[$a].'"){';

$brand_sql = "SELECT * FROM brand WHERE cat_id='".$cat_id[$a]."'";
$brand_qry = mysql_query($brand_sql);
while($brand_row = @mysql_fetch_array($brand_qry, MYSQL_ASSOC)){
echo 'addOption(document.form_name.brand,"'.$brand_row['brand_name'].'", "'.$brand_row['brand_name'].'");';
}//end of while loop

echo '}';

}//end of for loop

echo '
if(document.form_name.category.value == ""){
removeAllOptions(document.form_name.brand);
addOption(document.form_name.brand,"", "Select Brand");
}';

echo '}//end of function selectCategory()';


echo '
function removeAllOptions(selectbox){

var i;
for(i=selectbox.options.length-1;i>=0;i--){
selectbox.remove(i);
}
}

function addOption(selectbox, value, text ){

var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;

selectbox.options.add(optn);
}
</script>';
?>
</head>

<body>

<form name="form_name" action="" method="">
<table>
<tr>
<td>
Category: <select name="category" id="category" onChange="selectCategory()">
<option value="">Select Category</option>
<?php
$sql = "SELECT * FROM category";
$qry = mysql_query($sql);
while($row = @mysql_fetch_array($qry, MYSQL_ASSOC)){
echo '<option value="'.$row['cat_id'].'">'.$row['cat_name'].'</option>';
}
?>
</select>
</td>
<td>
Brands:
<select name="brand" id="brand">
<option value="">Select Brand</option>
</select>
</td>
</tr>
</table>
</form>

</body>
</html>[/PHP]

try to create the tables first in the database.. so that you could test this script.. and if this works.. you can change it to you desired variables... or modify the format to where you're comfortable with.. ^___^

bonski...

[bonski]

you can use AJAX also...to make the form look good... i mean... 'advanced'... hahahaha..

[fjm]

sorry... i was having lunch..^____^

No problem. I know how it is when you're hungry. :)

try to create the tables first in the database.. so that you could test this script.. and if this works.. you can change it to you desired variables... or modify the format to where you're comfortable with.. ^___^

bonski...

I recreated the tables exactly as you had them. The first dropdown box populates with the data but the second does not. It is just empty. What I noticed was that when I chose the second box there was no network communication what so ever. The onchange doesn't seem to be working. The page is not refreshing at all.

Would you have any suggestions? I figure since there are 2 boxes, we are 50% done. :)

Thanks a million for the code and the help Bonski!

Frank

[fjm]

you can use AJAX also...to make the form look good... i mean... 'advanced'... hahahaha..

Bonski.. If I had ANY idea idea that ajax would be so useful to me, I would have learned javascript a long time ago! I really missed out on that one.

Yes, advanced is the word. I love ajax. I went to w3schools.com and actually started to learn javascript because ajax requires a working knowledge of js first.

How long do you think it would take me to learn js?

[Purple]

Hi

going back to pbmods other suggestion of doing the second select in PHP, one way to implement this using an absolute minimum of javascript is like so:

change your first select html statement to add add an onchange event

[PHP]echo "<select name=\"district\" onChange=\"javascript:refresh_win('select_sector') ;\"";[/PHP]

ensure the form calls itself onsubmit using

<form name='FORM_NAME' method='POST or GET' action="<?php echo $_SERVER["PHP_SELF"] ?>;

add a submit button to your form called submit if you have not got one already which is on the form as you select the district

and add this javascript to the code.

function refresh_win(form_name)
{
    document[form_name].submit.click();
}

I generally run a collection of client side scripts in my projects to allow reuse and simplify maintenance which is why it is generalised - you could simplify it further and have it within the form body..

as a side note - if you have problems getting it working and everything looks ok, just check the html within the form is ok - some browsers will throw a big wobbler with the javascript if you don't close certain tags properly but the form will look ok when run.

Regards Purple

[bonski]

Bonski.. If I had ANY idea idea that ajax would be so useful to me, I would have learned javascript a long time ago! I really missed out on that one.

Yes, advanced is the word. I love ajax. I went to w3schools.com and actually started to learn javascript because ajax requires a working knowledge of js first.

How long do you think it would take me to learn js?

im sorry.. the script i post had error on line 27... its just a typo... change this line

[PHP]while($brand_row = @mysql_fetch_array($brand_row, MYSQL_ASSOC)){[/PHP]

to this one...

[PHP]while($brand_row = @mysql_fetch_array($brand_qry, MYSQL_ASSOC)){[/PHP]

then its ok.... sorry about that.. i was too careless.. hahaha.. anyway that will work..


bonski

[fjm]

Hi

going back to pbmods other suggestion of doing the second select in PHP, one way to implement this using an absolute minimum of javascript is like so:

change your first select html statement to add add an onchange event

[PHP]echo "<select name=\"district\" onChange=\"javascript:refresh_win('select_sector') ;\"";[/PHP]

ensure the form calls itself onsubmit using

<form name='FORM_NAME' method='POST or GET' action="<?php echo $_SERVER["PHP_SELF"] ?>;

add a submit button to your form called submit if you have not got one already which is on the form as you select the district

and add this javascript to the code.

function refresh_win(form_name)
{
    document[form_name].submit.click();
}

I generally run a collection of client side scripts in my projects to allow reuse and simplify maintenance which is why it is generalised - you could simplify it further and have it within the form body..

as a side note - if you have problems getting it working and everything looks ok, just check the html within the form is ok - some browsers will throw a big wobbler with the javascript if you don't close certain tags properly but the form will look ok when run.

Regards Purple

:( I can't get this thing to work. I tried purple.. I just get this:

 function selectCategory(){ removeAllOptions(document.form_name.brand);if(document.form_name.category.value == "1"){}if(document.form_name.category.value == "2"){} if(document.form_name.category.value == ""){ removeAllOptions(document.form_name.brand); addOption(document.form_name.brand,"", "Select Brand"); }}//end of function selectCategory() function removeAllOptions(selectbox){ var i; for(i=selectbox.options.length-1;i>=0;i--){ selectbox.remove(i); } } function addOption(selectbox, value, text ){ var optn = document.createElement("OPTION"); optn.text = text; optn.value = value; selectbox.options.add(optn); }  

[fjm]

im sorry.. the script i post had error on line 27... its just a typo... change this line

[PHP]while($brand_row = @mysql_fetch_array($brand_row, MYSQL_ASSOC)){[/PHP]

to this one...

[PHP]while($brand_row = @mysql_fetch_array($brand_qry, MYSQL_ASSOC)){[/PHP]

then its ok.... sorry about that.. i was too careless.. hahaha.. anyway that will work..


bonski

Bonski...... You be DA MAN!!!!!!!!!!! :) :) :) :)

Listen.. stupid question for you but.. how long did it take you to learn php? I'm trying to figure out how long I will have to suffer before things get clearer . :)

[fjm]

@ Purple,

Can I use your code to post my data to the database? I have not yet figured out how to actually submit the data. I have the button but that's about it. haha... Nothing that drives the button.

It looks like to me that if I use your code, I can post the data using a database script and then will return to the same screen. Am I correct on this?

[bonski]

Bonski...... You be DA MAN!!!!!!!!!!! :) :) :) :)

Listen.. stupid question for you but.. how long did it take you to learn php? I'm trying to figure out how long I will have to suffer before things get clearer . :)

hey i PM the answer.. check your inbox... hahahahaa...

[Purple]

Hi fjm,

You are correct, once the user makes the selection on the first select, the script is run again - and that is the neat bit...

within $_POST['district'] or $_GET['district'] will be their selection on the second run of the script. So if you test for the existance of these variables you can then run the second chunk of the script which returns the sector select.. so assuming the default selection of district is 0 => Select District:

Display district

if(isset($_POST['district']) and $_POST <> 0)
{
make selection from database to return all sectors belonging to district
the key of which is held in $_POST['district']
build and echo the select for the sector
}
check all required fields using isset and then the value before allowing the form processing to complete..

as a side note, if you haven't done so already, you will need to add some code to preserve the inputs the user has made on the first pass, on the second and subsequent passes..

regarding learning PHP - its something you need to keep plugging away at - get a good reference book. I found spending and hour in a big bookshop and going through the various publication to find one that suited my style of learning and experience much better than buying one blindly on the internet cause its called a PHP book has helped alot.

The concept we are discussing now, is a milestone in your learning - once you get it you will find coding forms using php / html much easier.

Regards Purple

[fjm]

Hi Purple,

Thanks again for the direction and the response.

within $_POST['district'] or $_GET['district'] will be their selection on the second run of the script. So if you test for the existance of these variables you can then run the second chunk of the script which returns the sector select.. so assuming the default selection of district is 0 => Select District:

I think I follow the concept on what you are explaining. Basically, if I am understanding you correctly, The two drop down boxes are populated one at a time. When the user chooses the first box, your javascript refreshes or loads the page and the connection script grabs the data from the db and populates the first dropdown box. Then the user makes a choice of the second box and the variable from the first box is stored into a variable. Is this correct? Sorry for explaining it back in newbie terms, but it the only way I can grasp it for now.

Display district

if(isset($_POST['district']) and $_POST <> 0)
{
make selection from database to return all sectors belonging to district
the key of which is held in $_POST['district']
build and echo the select for the sector
}
check all required fields using isset and then the value before allowing the form processing to complete..

Is the isset function the portion of the script that saves the variable from the first dropdown selection int variable?

as a side note, if you haven't done so already, you will need to add some code to preserve the inputs the user has made on the first pass, on the second and subsequent passes..

Is there a name for this type of code so that I can learn more about it? I have always wondered how code can be preserved in a page when you leave then come back. Is it a session?

regarding learning PHP - its something you need to keep plugging away at - get a good reference book. I found spending and hour in a big bookshop and going through the various publication to find one that suited my style of learning and experience much better than buying one blindly on the internet cause its called a PHP book has helped alot.

I am embarrased to say this, but I have 7 books on php and they are all equally as hard. :) I really hate to read and seem to learn better just doing it but I am finding out that I still have to read to be able to understand what is happening behind the scenes.

The concept we are discussing now, is a milestone in your learning - once you get it you will find coding forms using php / html much easier.

Thank you for the vote of confidence. I really need that right now. I kind of feel like I may be in over my head on this project I have taken on. I don't think it is small by any means and there is so much to do. I actually forced myself to do this project with the hopes that I would have a better understanding of php when it was all over with.

Thank you for all of your help Purple!

Frank

[Purple]

Hi Frank,

Your understanding of the concept is correct - drop down boxes appear as the user progresses through the code

The isset() function simply tests to see if a variable is set read more here

if you don't test the variable with isset before you try to do something, PHP will throw a warning which depending on your environmental config may or may not be visable to the user - take a look at Motoma's excellent post on setting debugging messages on here

There are a number of ways to save variables across script iterations - I propose we use a simple but effective route..

for text fields - try

[PHP]<input type='text' name='field1' value='<?php if isset($_POST['field1']) echo $_POST['field1'];else echo "";?>'>[/PHP]

on the select statement you will need to check what the user has selected and append selected='selected' to that option.

Regarding learning more about it - I think this approach should suffice for your current needs - if you want to allow your user to naviagate away from the page and maintain the values on their return, take a look at sessions,

talking books - I would suggest reading the first couple of chapters on the basics - variables, arrays, functions and then use them for reference.

What you need to remember is we all started somewhere and have very different background which will influence how we approach a problem.. There are many routes to a solution and we all learn something new everyday :)

What timeframe have you on this project ? is it one form or many ? Is it being accessed on across a Lan or the internet ?

Purple

[fjm]

Your understanding of the concept is correct - drop down boxes appear as the user progresses through the code

The isset() function simply tests to see if a variable is set read more here

Ok, great. I do have the concept. I did forget to mention in one of my prior posts, but for some reason, my mind *must* understand the concept *before* it actually understands how to do it. Some people seem to be able read something, not understand how or even why it is being done, and still preform the task at hand. I'm not at all like that. I wish I were sometimes.

if you don't test the variable with isset before you try to do something, PHP will throw a warning which depending on your environmental config may or may not be visable to the user - take a look at Motoma's excellent post on setting debugging messages on here

There are a number of ways to save variables across script iterations - I propose we use a simple but effective route..

for text fields - try

[PHP]<input type='text' name='field1' value='<?php if isset($_POST['field1']) echo $_POST['field1'];else echo "";?>'>[/PHP]

on the select statement you will need to check what the user has selected and append selected='selected' to that option.

Now this, I understand and have had many many struggles with. I know this is not correct, but to avoid using the isset function, I simply use the "@" to supress the warnings. I had tried to use isset in the past but was unsuccessful at getting it to work. I will however take your example below and incorporate it into one of my scripts and play with that. Again, my goal is to write "better" code than last weeks code. :)

Regarding learning more about it - I think this approach should suffice for your current needs - if you want to allow your user to naviagate away from the page and maintain the values on their return, take a look at sessions,

talking books - I would suggest reading the first couple of chapters on the basics - variables, arrays, functions and then use them for reference.

Ok, that I can certainley do. Thanks for pointing me in the right direction.

What you need to remember is we all started somewhere and have very different background which will influence how we approach a problem.. There are many routes to a solution and we all learn something new everyday :)

Your right and I often remind myself of that. I see so many people that have come soooo far it makes me think they have been doing this your years and years. I just want to be there already. I know that the more I do, the more I will learn. Honestly, I really depend on you guys for help. Without you guys, I would truly be lost.

What timeframe have you on this project ? is it one form or many ? Is it being accessed on across a Lan or the internet ?

I am not really on any timeframe, although I would like to finish this project as soon as possible.

Because I have so many tables and so many things I have modeled in the db, I am estimating maybe 50 or so php pages?? I already know that I will need to use sessions.

Is there any real magic in using these or is it as simple as just :

<?php
session_start();
?>
<!-- set right at the start, before any other text at all (as this is an html page-->
<script language="php">
//the above script tags to please FrontPage rather than <?php
//set some variables:
$_SESSION['myveg'] = 'carrot';
$_SESSION['mysweet'] = 'lollipop';
$_SESSION['time'] = time();
//check they are set:
echo 'Welcome to page #1<br>';
echo "My Veg is: ".$_SESSION['myveg']."<br>";
echo "My Sweet is: ".$_SESSION['mysweet']."<br>";
echo "My Time is: ".$_SESSION['time']."<br>";
//write a link to the next page (sessionStartPage2Ex.htm):
echo '<br /><a href="sessionStartPage2Ex.htm?">page 2</a>';
</script>

The bulk or majority of the php will be ran on an internal LAN and there will be pieces that will be be out on the net. I would like the ability to be able to have some users in the field to use a php form to enter data into the db.

Well, my database has roughly 80 tables. My database is broken down pretty well (which doesn't help the ease of writing php code I am seeing).

I am creating select, insert and update forms in php to handle the data. As I had mentioned to I believe Motoma in an eariler post, I have seen many applications written in php that are somehow "condensed" into a single index.php script and call other classes. This is way above my head right now and I figured I would try to get just the basics before attempting to tackle what I *think* is OOP.

If you have any suggestions for me Purple, I would greatly appriciate hearing them. :)

Thanks for your help.

Frank

[Purple]

Hi Frank,

Looks like you have a challenge ahead.

I would suggest you spend some time looking at functions and holding them within classes (as methods) - if you don't get this under your belt, your application is going to bloat and be a nightmare to maintain.

Sessions are simple to use once you get them working within your environment - take a read here to get you going..

Consider how you are going to allow internet access to your application - I have used VPNs previously to allow external access to applications I have deployed to minimise the risks..

I am creating select, insert and update forms in php to handle the data. As I had mentioned to I believe Motoma in an eariler post, I have seen many applications written in php that are somehow "condensed" into a single index.php script and call other classes. This is way above my head right now and I figured I would try to get just the basics before attempting to tackle what I *think* is OOP.

Whilst the condensed approach may appear complicated, once you can strip out your functions I believe you will find having less pages which do more easier to manage.

Good luck with your project

Regards Purple

[fjm]

Looks like you have a challenge ahead.

This has been nothing short of a challange believe me.

I would suggest you spend some time looking at functions and holding them within classes (as methods) - if you don't get this under your belt, your application is going to bloat and be a nightmare to maintain.

I agree already.. I am already losing track of what form is supposed to be doing what..

Is it possible you can tell me where to look for some information on this? Is this OOP? Is that what I need to read?

Sessions are simple to use once you get them working within your environment - take a read here to get you going..

Well.. I am happy to report that I had my first experience with sessions tonight. I was very fortunate and found a login system on the net and followed the tutorial and actually got it to work. Man am I ever stoked!! I can see what the session does. It keeps me either logged in or checks to see whether I came to a page first without logging in first. Really cool stuff.

Consider how you are going to allow internet access to your application - I have used VPNs previously to allow external access to applications I have deployed to minimise the risks..

Yes, I have considered that. I figured that with the login system in place being used over a ssl I should be fine. I have used openvpn in the past and was considering that also.

Whilst the condensed approach may appear complicated, once you can strip out your functions I believe you will find having less pages which do more easier to manage.

Is this where I would have to use $this->variable bla bla... ??

Good luck with your project

Thanks Purple!!

[Purple]

Hi Frank,

Good job getting to grips with sessions etc..

now back functions, classes and methods..

Is this OOP?

there are a number of ways you can implement central function..

You could dip you toe in and use functions collected into discrete files and use include to make it available to your code.

You could imerse your foot by wrapping the functions into a class like this:

[PHP]<?php
class A
{
function foo()
{
if (isset($this)) {
echo '$this is defined (';
echo get_class($this);
echo ")\n";
} else {
echo "\$this is not defined.\n";
}
}
}

class B
{
function bar()
{
A::foo();
}
}

$a = new A();
$a->foo();
A::foo();
$b = new B();
$b->bar();
B::bar();
?> [/PHP] read more here, this is where you get into using $this when a method is called or a variable is referenced from within an object context.

or you could dive right in and deploy some of the advanced OOP concepts and functionality - read more here

Purple

[fjm]

Heya Purple.


I love the idea of seperating out a set of functions and using an include script. You know, OOP *seems* to be a lot more organized IMHO; just by looking at it. I think I would like to start by dipping my toe, going easy with the functions first.

I am also going to read that link you provided.

Let me ask you a question.. I have ran across many functions on the net but sadly, I don't know how to impliment them. How exactly does one call a function? I am lost after the include.

function good_day()
{
echo "have a nice day";
}[
 

Do I call it by simply saying "good_day" or good_day()?

[Purple]

Hi Frank,

If you have used include() or similar (take a look atthis toward the bottom of the function description and before the user contributions are a bunch of other associated and similar functions to include..) and the include does not have a class around the functions then you simply call the function as you would any core PHP function :

$return = function_name( parameter list separated by commas )

$return now holds output from the function placed there using return($variables) within the function.

The PHP site has a good description of calling user defined functions with examples here

Hope that helps.

Regards Purple

[fjm]

Purple,

If I am understanding correctly..... (Please tell me if I am correct on this or not) I can include say a function that can output html. Yes?

I am thinking that if this can in fact be done, the I can have 1 and only 1 template file and stick my relevant html into functions then just include those functions into the template.

That is, the html that will be dynamic such as my insert, update and deletes.

Am I correct?

Thanks Purple!

Frank