
	Country State Drop Down

Single Address Form Demo

Double Shipping & Billing Address Form Demo

Select a country and the country's states or provinces are listed on the right. If the country doesn't have any states or provines configured, a text box is displayed.

In this demo, Canada, United States and the United Kingdom have states or provinces available. Other countries will give the text box.

Download
README

Your Comments

Passing State In URL

Submitted by: Brian on Wednesday, December 6, 2006 09:33 am

In the country/state javascript, I need to include the passing of the state
name in the URL (targetpage.php?country=US&state=OH&statename=Ohio)

Any suggestions, or maybe a recommended book? I know a dozen other
languages, but this javascript is confounding me.

If you can help - thanks!

Got the script from javasource, and it works perfect.

Brian

RE: Passing State In URL

Submitted by: Duane on Wednesday, December 6, 2006 09:34 am

Brian,

I tried to make the newer version so you don't have to touch the Javascript. On version 1.1 (http://www.downhomeconsulting.com/Downloads/Country_State_Drop_Down/demo.html), you can change the html:

<input type="hidden" value="" name="stateDefault" id="stateDefault">
<input type="hidden" value="US" name="countryDefault" id="countryDefault">

to:

<input type="hidden" value="<?= $_GET['state'] ?>" name="stateDefault" id="stateDefault">
<input type="hidden" value="<?= $_GET['country'] ?>" name="countryDefault" id="countryDefault">

That should do the trick.

Duane

Problem send variables to Process PHP

Submitted by: Jose D. on Wednesday, December 27, 2006 10:43 am

I have problem sending a data to a Process PHP.

This is my html code:

<form action="processreg.php" method="post" name="form1" target="_blank" id="form1">
<input type="hidden" value="US" name="countryDefault" id="countryDefault">
<input type="hidden" value="" name="stateDefault" id="stateDefault">
<table width="414">
<tr>
<td width="66">Nombre:</td>
<td width="336"><input name="pedi_name" type="text" id="pedi_name" size="31" /></td>
</tr>
<tr>
<td>Apellidos:</td>
<td><input name="pedi_lastname" type="text" id="pedi_lastname" size="31" /></td>
</tr>
<tr>
<td>Dirección:</td>
<td><input name="pedi_addr" type="text" id="pedi_addr" size="31" /></td>
</tr>
<tr>
<td>Teléfono:</td>
<td><input name="pedi_phonenum" type="text" id="pedi_phonenum" size="31" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input name="pedi_email" type="text" id="pedi_email" size="31" /></td>
</tr>
<tr>
<td><label for="label5">Edad:</label></td>
<td><input name="pedi_age" type="text" id="pedi_age" size="31" /></td>
</tr>
</table>
<fieldset><legend>Sexo:</legend>
<label>
<input type="radio" name="pedi_sexo" value="masculino" />
Masculino</label>
<br />
<label>
<input type="radio" name="pedi_sexo" value="femenino" />
Femenino</label>
</fieldset>
<table width="461" border="0">
<tr>
<td width="176">
País:
<select id='countrySelect' name='country' onchange='populateState()'>
</select> </td>
<td width="275">
Estado / Municipio
<select id='stateSelect' name='state'>
</select>
<script type="text/javascript">initCountry('US'); </script> </td>
</tr>
</table>
<label for="label2"></label>
<table width="466">
<tr>
<td width="166">Nombre de Usuario:</td>
<td width="288"><input name="pedi_user" type="text" id="pedi_user" size="19" /></td>
</tr>
<tr>
<td>Contraseña:</td>
<td><input name="pedi_password" type="text" id="pedi_password" size="19" /></td>
</tr>
<tr>
<td height="22">Confirmación Contraseña:</td>
<td><input name="pedi_confpass" type="text" id="pedi_confpass" size="19" /></td>
</tr>
</table>
<div align="center">
<label for="Submit"></label>
<input type="submit" name="Submit" value="Enviar Info" id="Submit" />
<label for="label"></label>
<input type="submit" name="Submit2" value="Borrar Info" id="label" />
<br />
</div>
</form>
Please say me which is my error in my code. Because javascript is find but not send a variables to my PHP
Please HELP ME

Thanks

RE: Problem send variables to Process PHP

Submitted by: Duane on Friday, December 29, 2006 08:59 am

Jose,

Looking at your HTML the only thing I see missing is:
<SCRIPT type="text/javascript" SRC="country_state.js"></SCRIPT>

You say the javascript is fine, so you must have that in your code already.

There's nothing special my code does to the form fields that would prevent them form posting to your PHP page processreg.php. You can verify processreg.php is getting the post by adding <?php print_r($_POST) ?> somewhere on processreg.php. It should print out the form field names and the values in the field.

Duane

Passing value of state & country to hidden fields

Submitted by: Mari on Friday, January 5, 2007 03:05 pm

Hi! I need to pass the user selected state and country values to a pair of hidden fields that requires a different name & id (to write to our SalesForce.com database):

That is, I'd like to do something like this (and similarly for the country value):

<script>
function assignState() {
document.form.00N000000069rSC.value=document.form.select.value
}
</script>
<select id='stateSelect' name='state' onchange="assignState()">
</select>
<input type="hidden" id="00N000000069rSC" name="00N000000069rSC">

But it's not working. Can you help?

Submit and Back Issue

Submitted by: Inderjeet on Monday, February 26, 2007 12:40 am

Hello,
The script is an excellent work, truly dynamic in nature. However, if someone submits the form and then hits back from the processor page (for any reason, validation failure etc.) it will repopulate the state and remove the user's previously selected value.

Perhaps I'm missing out on something.

Any Ideas?

Regds
IJ

Country State dropdown on 2nd time through

Submitted by: Brian Tinkler on Friday, April 6, 2007 06:43 pm

Duane,

I have been using the country/state JS for a few months now. I am trying something new, when our patrons come through for a second ordered item in the same session, I want to be able to pass the statename through again.

I reset all the variables in PHP from the javascript code, and the form populates correctly, but unless they actually CHANGE the state name, the state code comes through, but the name gets dropped on subsequent orders.

Is there any way to force the "populatestatename" to re-run even if the stateSelect input is not changed so that the variable of the hidden statenameText actually gets set to the state name again? It it currently setting correctly in the form and since there is no change, the statenameText variable is coming through as a blank in the URL.

I've been toying with it now for a few days, and I'm stumped.

Thanks!

Brian

2 country state dropdown in the same form

Submitted by: Carlos on Monday, May 7, 2007 04:07 pm

Hello;

as you notice I don't know much of javascript,

I am trying to use this script for billing and shipping adress, but I don't know how to make it work.

I need some help on that, 'cause i am stumped

Carlos

Reversing?

Submitted by: zs on Thursday, May 10, 2007 08:54 am

I love this script, it works very well for me! Would be nice to have another function for deciphering the state/country back into their long non-abbreviated form. It's a bit beyond my javascript know how though!!

Add cities to drop down list?

Submitted by: Stewart on Friday, May 11, 2007 12:18 pm

I think this could be a handy script but i would like to use it to sort down to city level.
I have been trying to do it myself but when i come to add the city names from the database i have - then try to change the code to sort "Country, State/County/Provence, city" it stops.

My data is the same as this one - as to say that the countries, states and cities have id codes!

For example my city data is listed like this and is formated in the same way as in your code:

var city = '
//countryCode:stateCode:cityCode:cityName|
TR:20:APY:Acipayam|
IT: :ACR:Acireale| <---no state!
US:GA:ACR:Ackerman|
US:MS:UAG:Ackerman|
US:IA:AKY:Ackley|
GB:WYK:ACK:Ackworth|
GB:NFK:ACL:Acle|

also if the country has no states then just list the cities in that country regardless!
I'm quite new to java/php/asp scripts and i would very much appreciate some help.
Thanks,
Stewart

Question

Submitted by: Evan Klein on Tuesday, May 22, 2007 12:15 am

Im having one problem I have 4 fields, country select for billing and shipping and state select for billing and shipping. However the JS creates a new textbox or drop down menu for the state fields with the same name. So how am I supposed to parse it with PHP when the textbox for billing and shipping state have the same name? I need to validate the $StateBill and $StateShip for both to make sure they are valid but the JS gives it the same name.

Passing the NAME to STATE and COUNTRY

Submitted by: Edward on Monday, May 28, 2007 04:27 pm

I just found your site after doing a search to see if I could find a java script to do Country/State drop down. Thanks for this great piece of software. Very nice, but I have a question. I want to pass the Country NAME instead of the 2 digit code. (IE When I select "Canada" in the country drop down" I want to have "Canada" placed into the demo line of code:

<select id='countrySelect' name='country' onchange='updateState(this.id)'></select>

When I access the "$country" field I only get "CA" and not "Canada"

Same with the state.

Thanks Ed

Drop Down Menu

Submitted by: Tony on Wednesday, June 6, 2007 09:31 pm

Hi
I've downloaded this script to use, but when I've tested it, I'm just getting empty drop down menus. I've double checked the filenames in the src line, and it seems ok.

Any suggestions as to what could be wrong?

(v limited javascript knowledge!)
T

Validating state when it's a text box not a select

Submitted by: Jennifer on Tuesday, November 20, 2007 12:48 pm

Hello!

This is a fantastic little piece of code you have here, very easy to use. However, I'm having difficulty validating the state when it's a text box and not a select box.

if ((!(document.forms[0].country.value == "US")) &&
(!(document.forms[0].country.value == "CA")) &&
(!(document.forms[0].country.value == "AU")) &&
(!(document.forms[0].country.value == "BR")) &&
(!(document.forms[0].country.value == "NL")) &&
(!(document.forms[0].country.value == "UK")) &&
(!(document.forms[0].country.value == "EI")) &&
(document.forms[0].state.value == "")) {
alert("The Ship To State may not be blank.")
document.forms[0].state.focus()
return false}

The error message says that state is either null or not an object.

Any help would be greatly appreciated!

showing errors if use dreamweaver cs3

Submitted by: Alidad Modjtabai on Tuesday, November 27, 2007 02:51 pm

hi, I like this scripts and I want to use this scripts to send data to the mysql datbase using dreamweaver, but when i created insert statments using dreamweaver, but i'm showing erros do you have any idea what is this mean by that!

Alidad

Drop down IE vs Firefox

Submitted by: Mark on Friday, February 8, 2008 11:04 am

In IE, when you select a country and leave the page, if you use the browsers back button, your selection is gone, it goes back to the default. However, in Firefox, your select remains. This is what I would like it to do in IE. Any suggestions. Otherwise, it works great.

Thank you,
Mark Wagner

problem when integrating it with asp.net

Submitted by: psspl on Saturday, March 15, 2008 05:48 am

Hi
I am facing a problem when i integrate the country state dropdown in ASP.net... i have to give the <runat="server"> tag with the <select> tag like this:

<select id='countrySelect' runat = "server" name='country' onchange = 'updateState(this.id)'> </select>

but if i do so nothing is displayd when the form is viewed

please help

Use Radio Buttons for Country

Submitted by: Darren Burns on Thursday, April 24, 2008 09:03 am

We only need two countries (US & Canada) and I've been trying to convert this to use two radio buttons to select the city. No knowing javascript I am just bumbling around. This is what I experiemented with so far without success. I have edited the country and state list in the js file to only contain US & Canada.

<SCRIPT type="text/javascript" SRC="country_state.js"></SCRIPT>

State:
<div>
<select id='stateSelect' name='state'>
</select>
</div>

Country:
<div>
<select id='countrySelect' name='country' onchange='updateState(this.id)'>
</select>
</div>

Country:
<input type="radio" checked name="country" value="US" id='countrySelect' onclick='updateState(this.id)'>United States
<input type="radio" name="country" value="CA" id='countrySelect' onclick='updateState(this.id)'>Canada

<SCRIPT type="text/javascript">initCountry(); </SCRIPT>

Any Suggestions would be greatly appreciated.

Use Radio Buttons for Country

Submitted by: Darren Burns on Thursday, April 24, 2008 09:06 am

Oops. That should have been "use two radio button to select the country." (not city)

Use Radio Buttons for Country

Submitted by: Darren Burns on Thursday, April 24, 2008 09:14 am

Oops. That should have been "use two radio button to select the country." (not city)

Good Code

Submitted by: shraddha rusia on Saturday, June 7, 2008 04:12 am

I'm very impressed, good code.........

country, city and state drop down menu

Submitted by: kiran singh on Friday, June 27, 2008 11:11 pm

I'm trying a program that allows a user to select a country from the drop down list and when he does so the list of all the states of that country should appears in the state drop down list and the same thing should happen in case of city also.