2 combo box, countries and provinces

[andresbezem]

What I want to achieve is to create two drop-down menus, but where the options listed in the second list are dependent on what the user selects from the first.

Simple example - let's say the first drop down list asks what country you live in. Depending on which country is selected, the second box should display a list of states (or provinces/countries/regions etc) pertinent to that country.

Obviously I'm looking for a cross-browser compatible solution. Javascript? I'm not sure... Should I use some Javascript that refreshes the page and send the countryid to that same page?

Or should I look for an effective dynamic client-side solution so that the browser does not have to refresh when the first selection is made in order to display the second list?

By the way, I'm using MySQL and PHP for the server-side and I know NOTHING of Javascript, so I would need the whole script, here's what I have so far:

<?php
mysql_connect("localhost","","");
mysql_select_db("abctango");

  if (!isset($pais)) $pais=11;

/ 11 is my country's id, this way that one is the default country in the list /

$sql="select * from paises order by 2";
$res=mysql_query($sql);

  while($fila=mysql_fetch_array($res))
{ 
    print("<option value=\"$fila[id_pais]\"");
    if ($fila[id_pais] == $pais) {
	print ("selected");
	$divi=$fila[id_div];
    }
    print(">$fila[pais]</option>");
}

print("  </td>
</tr>

<tr>
</select>

  <td><select name=\"prov\">
  ");


$sqlprov="select * from provincias where id_pais='$pais' order by 2";
$resprov=mysql_query($sqlprov);

  while($filaprov=mysql_fetch_array($resprov))
{ 
    print("<option value=\"$filaprov[id_prov]\"");
    if ($filaprov[id_prov]==26) {
	print ("selected");
    }
    print(">$filaprov[prov]</option>");
	}
	print("</select> ");
	?>

Thank you very much!!!

[sarahk]

What you have looks good. The only thing is that the user needs to submit the form when they select the country. The form sees that the information is incomplete so rebuilds with the new country selected and the valid states in the drop down.

I wouldn't worry about using too much javascript.

[andresbezem]

But in order to do that I need to let the form now that there can not be any part without filling. how do I do that?
And also I will force the user to waste more time having to refill a part of the form

[sarahk]

You already know how to save the data which has been entered so just continue doing that for all the fields.

then at the top of the form you have

if (!isset($pais) && !isset($name))
  $redrawForm = true;
else
  $redrawForm = false;

if ($redrawForm)
{
  show the form with any existing values
}
else
{
  save to database, email admin etc.
}

To get a select to submit the form I think the code is

<select name='pais' onchange='submit();'>

[andresbezem]

the <select name='pais' onchange='submit();'> doesnt work.
Do I have to write anything else in javascript before? or only this?

[sarahk]

this is an example of the syntax I use

<select name="account" onchange="submit();">

you can see it at work at http://www.pcpropertymanager.com/botspotter/

It must be inside a form to work, otherwise there is nothing to submit.

[andresbezem]

That's exactly how is in my form:

<select name="pais" onchange="submit();">

but when I select the country nothing happens.

Do i need to write on the beggining of the page something that declares the javascript?
like: <script> something</script>

[sarahk]

no you don't have to do anything else. do you want to post your test page so I can have a look?

[andresbezem]

Yes , of course:

http://www.abctango.com/guias/form_profesionales2.php

Thank you very much 🙂

[sarahk]

this is wierd, doesn't work for me either

I'll have a look.

first up tho' you have a mysql error at the end of outputting the countries which means you have text after your last </option> and the </select>

[andresbezem]

I already changed it,
but that was still in developement, that gonna dissapear from there.
So you have no idea why doesn't work, do you?

[sarahk]

nope, can't see why my form is ok and yours isn't.

I added a name for the form and tried accessing it explicitly.

It says the object doesn't support this property or method but it's not talking about the select, it must be the form.

if you change the field to be

<select name="pais" onchange="alert('hello world');">

it works so we know the onchange is legal.

maybe try the clever folk at
http://www.weberdev.com/phorum/list.php?f=5
or
http://codewalkers.com/forum/index.php?forum=clientside&realm=default

there's also an stray </select> floating around.