drop down list items

hamsa

Hi every body

I am the begginer php coding ...
i have 2 drop down list items one for countries and other for cities ...
when user choose the country i want refresh the page automaticly to retrieve the cities for this country

Any body can help me....plz🙁

cosminb

JavaScript is what you're looking for(maybe used with php depending on how you want to implementate it)

Find some sites that are dooing that and look at their code

hamsa

hi cosminb

thanks for ur replayed...

i found many sites about that but i couldn't understant it ..
if any body can explan to me how i use javascript with php to solve this problem...

cosminb

lets say you have two selects one named "country" and the other named "city"
on you first select ("country") you do an onchange event like this:

and in some_function () you can make a redirect to a page that has the cities for that country. depending o which is selected, like this:

hamsa

hi again

can you check my php code with html and where exactly i put the script code (in same file or in other file)... i just put the code which retrieve the country name from table ... about the cities i don't know who i do it ....

php file:

<body>

<?php

// My database is oracle ...
$connection=OCILogon("username","password","hoststring");

if (!$connection) {
echo "Couldn't make a connection!";
exit;
}
// table countries for countries names and table cities for cities names..
$sql="select COUNTRY_NAME from COUNTRIES";

$sql_statement=OCIParse($connection,$sql);

OCIExecute($sql_statement);

$nrows = OCIFetchStatement($sql_statement,$results);

if($nrows>0){
for ( $i = 0; $i < $nrows; $i++ ) {
reset($results);
while ( $column = each($results) ) {

$data = $column['value'];

}
}

OCIFreeStatement($sql_statement);
OCILogoff($connection);

<form method="POST" action="--WEBBOT-SELF--">
<p> </p>
<p align="center"><select size="1" name="country" onchage="some_function()">
<option selected>--------------Select College------------</option>

<?php for ($i=0;$i<$nrows;$i++) {
echo("<option> "."$data[$i]"."</option>");
}
?>
</select></p>

<p align="center"><select size="1" name="cities">
<option selected>----------Select Department-----------</option>
</select></p>
<p> </p>
<p> </p>
<p> </p>

</form>

</body>

</html>

this is my code ...

thanks

cosminb

You could put it in the same file.

<script language="JavaScript">
function some_function(countryValue)
{
window.location.href="http://www.yourserver.com/yourscript.php?country="+countryValue;
}
</script>

PHP CODE
<?php
 //get the coutries first and keep it in an array (lets's say $country)

if ($_GET['country']!=='')
{
  //get the cities for that country(databasde or file) and keep it in an array called $city
}

//and now the html part
?>
  <select name="country" onchange="some_country(this.value)">
     <option value="" selected>Select a country</option>
<?php
for ($i=0; $i<count($country); $i++)
{
   echo '<option value=',$country['name'],'>',$country['name'],'</option>';
}
?>
 </select>
<?php
//this was the country list

//now you check to see if you have any cities for that country

if (count($city)>0) 
{
  echo '<select name="city">';
    echo '<option value=',$city['name'],'>',$city['name'],'</option>';
  echo '</select>';
}

else {
  echo '<select name="city">';
    echo '<option value=>Choose a country first</option>';
  echo '</select>';
}
?>

There could be some mistakes in my code, so don't expect to work from the first time. This was just to give you an idea on how to do this

hamsa

Hi again cosminb

thanks for your help

i do it but i have a problem when redirect the page the country list is clear the name which i choose it .. i want name of country display after redirect

how can i solve this problem..

Threehearts

you have to set the option of your select of the chosen country to "selected" with javascript.

i writing this out of memory so take it with a grain of salt:

javascript:

var_chosen_country = <?=$var_chosen_country ?>

for(x = 0; x < document.forms[form_id].elements
[id_of_select].options.length; x++){

if(document.forms[form_id].elements
[id_of_select].options.text == var_chosen_country ){

document.forms[form_id].elements
[id_of_select].options.selected = true;

}

if you dont mind coding it, you actually dont have to submit your form just to get the 2nd select, you can do that clientsided as well if you like.

somthing like this :

//do the following 2 lines automatically with php out of your database
arr_elements_of_2nd_select = new Array("elem1","elem2","...");
arr_values_of_2nd_select = new Array("value1","value2",...);

for(x = 0; x < arr_elements_of_2nd_select.length; x++){

//constructor expects the following values: str Text of Option, str value of option, bool default select true/false, bool selected true/false
//exchange values as you need them... i'd put x +1 (0 should be empty i think) as value
obj_current_option = new Option(arr_elements_of_2nd_select[x], arr_values_of_2nd_select[x],false, false );
//forgot this: sorry
document.forms[nr_of form].elements[nr_of_select].options[document.forms[nr_of form].elements[nr_of_select].length] = obj_current_option;
}

if you punch in the arrays (if you name them by country and use eval so you dont have to play around with switch or ifs that'll be easily dont) youll get your 2nd select without havign to reload the page.

greetings, jakob

hamsa

hi again

i couldn't understand how i can let data still after refresh the page ...its important for me to solve this problem as possible as soon... plz can you explain it for me ..
and what about session..
i don't know how i use it in my code ???

thanks

Threehearts

hi!
point is, after you have reloaded your page (if you want to do that)
you can one of two things to put the option of your "county" select box to the value it had before the form was submitted:
1) serversided:
works if you create the options serversided:

you check the value or text of the option against $_GET['county']. if its equal you echo SELECTED into the option so the browser gets
<option value="..." selected> ... </option>

example:

<?php
for($x = 0; $x < sizeof($arr_options); $x++){

echo "<option value=".$arr_options[option_value];
if($arr_options[option_value] == $_GET['country']){echo " selected";}
echo ">". $arr_options[option_text] . "</option>;

}
?>

2) clientsided
(works on existing options as well)

you check the value of all options against var_country (i'd use something easily recognizable to mark your variables, like $ in php). of course you first have to get the value of $_GET['country'] into your clientsided script, something like:

and so on...

if those values are equal you set selected = true for this option.

example (this is clientsided = javascript!)

//count as long as there are options
for(x = 0; x < document.forms[n].elements[m].options.length; x++){

//compare value of each option (you can take name as well) and var_country
if(document.forms[n].elements[m].options[x].value == var_country){

//they equal --> set selected = true
document.forms[n].elements[m].options[x].selected = true;

//since you can stop the loop now:
break;

}
}

the advantage of doing this clientsided is that you dont have to reload the page for each child-selectbox.
the disadvantage is, that youre basically browserdependent, so if the browser doesnt execute javascript it wont work...
not that often the case, how ever.

what it comes down to is your taste: choose what solution looks better to you.

hope that helped.
just keep always in mind what is client- and what is serversided, then you'll do just fine.

greetings, jakob

Threehearts

^----- forgot something above:

if you try the clientsided solution you have to execute the script after the parser it through the "select".
if you dont do that javascript will try to shift through the options of the select, but the select doesnt exist yet --> error and doesnt work.

best is you put the thing into a function and place a call into some element at the end of the page, just to be on the safe side.

greetings, jakob

hamsa

i used the clientside ..but it's not work ..
can you explain more for me..plz

Threehearts

sure...

this is for the clientsided generation of the right options, i took it that this is what doesnt work...
if im wrong please tell what you tried that didnt work...

just to summarize what happens when (the flow of the thing for the clientsided solution)

1) get data of all possible options for all selects from db (or other source of data)
2) use php to generate the appropriate arrays for the clientsided script (1 array: options + values of 'country'; n arrays (number of countries): options + values of 'town')

--> page sent to browser
3) (happens automatically): browser renders/interprets HTML form with 2 selects. both selects have got 1 empty option; reason: onChange wouldnt work on the first option since thats no change...

4) call function_fill_in_options() for first select (at the end of the page so we dont get an error; onload or straight javascript)
5) function_fill_in_options() reads options for select_country from appropriate array and adds them to select_country;

6) wait for userinput: onChange call function_fill_in_options() for select_city
7) function_fill_in_options() reads the value of select_county;
it deletes all options from select_city (in case this is the 2nd+ call) so Nr. of options is 1 again (1 empty option)
it reads options from appropriate array (it knows which one because of the value of select_country) and add them to select_city
8) wait for user input

9) do other calculations you like with the data before you send it

10) submit: either you put a onChange="document.forms[0].submit();" into select_city (fast but not very userfriendly) or you put in a submit button (or an image with onClick="...submit();" of course).

the snippets of code i had posted before do this, so you just have to combine them according to this list...

i hope this answers your questions.

if it still doesnt work, post your code here so we can have a look, please.
thanks & greetings,
jakob

hamsa

...php file "col_list.php"

<body>

<?php

include('connect.php');

$sql="select COUNTRY_ID,COUNTRY from COUNTRIES";

$sql_statement=OCIParse($connection,$sql);

OCIExecute($sql_statement);

$nrows = OCIFetchStatement($sql_statement,$results);

if($nrows>0){
for ( $i = 0; $i < $nrows; $i++ ) {
reset($results);
while ( $column = each($results) ) {

$data = $column['value'];

}
}

<p align="center"><select size="1" name="country" onChange=submit();>
<option selected>--------------Select Country------------</option>

<?php for ($i=0;$i<$nrows;$i++) {
echo("<option >"."$data[$i]"."</option>");
}

</select></p>
<p align="center"><select size="1" name="cities">
<option selected>----------Select City-----------</option>
<?

$sql_city="select CITY_ID,CITIES from CITIES where COUNTRY_ID=(select COUNTRY_ID from COUNTRY where COUNTRY='$country')";

$sql_statement_city=OCIParse($connection,$sql_city);

OCIExecute($sql_statement_city);

$nrows2 = OCIFetchStatement($sql_statement_city,$results);

for ( $j = 0; $j < $nrows2; $j++ ) {
reset($results);
while ( $column1 = each($results) ) {

$data1 = $column1['value'];

}

for ( $j = 0; $j < $nrows2; $j++ ) {
echo("<option> "."$data1[$j]"."</option>");
}

OCIFreeStatement($sql_statement);
OCIFreeStatement($sql_statement_city);

OCILogoff($connection);
?>

</form>

</select></p>
<p> </p>
<p> </p>
<p> </p>

</form>

</body>

</html>

This is my code ... plz check it and tell me how can i solve the problem

thanks for your help with my regards

Threehearts

Hi!
--> set "selected" in option:

<option selected>--------------Select Country------------</option>

<?php for ($i=0;$i<$nrows;$i++) {
echo("<option";

if($_POST['country'] == $data[$i]){echo " selected";}

echo ">"."$data[$i]"."</option>");
}

and in the end a submit button will be needed of course.

was that what you meant?
hope it is.
if not, what exactly does not work?

greetings, jakob

hamsa

it's not work..when i write this code it didn't retrieve the countries names in country list...
plz help me ..this the last week for finish my work...

any help plzzzzzzzzzzzzzzzzzzzzz🙁

tekky

ohh geez, 2 pages and you're doing this the hard way....

you cant make it redirect to another page and still keep your form values.....

do onChange=submit();
(I believe submit() is what I'm thinking of, if not I'll look it up later)
that way when you change the menu, it will SUBMIT the form and the post data, then you can parse the variables (on the same page if you like as its reloading) and add the Cities list.....