Form elements depend upon selection....

Someone in another thread tried to help with something, but I think I was too vague, and anyway, that solution didn't work for me.  

What I want is if the user selects USA from a dropdown box, then the another dropdown box is created and populated with US States, if the user selects CAN, another dropdown box is created and populated with Canadian provinces, and if the user selects something else, then there is no second select box, but instead an input field where they can type it in.

Can anyone help out here?

Thanks
jen_jen_jenAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

b0lsc0ttIT ManagerCommented:
Do you want this all to be done by Javascript?  Often this type of effect is done with server side code too and an effect called AJAX.  For just what you want it isn't needed and might be overkill but please clarify.

Also, I can help with code either way but if you need specifics then please provide the html for your current page, the list of US states you wish to use, and the list of Canadian provinces.  If you want to complete those later then the javascript I provide can be more general.

bol
0
b0lsc0ttIT ManagerCommented:
I made a sample page with all of the details you need.  The HTML and script is below.  Let me know if you have a question or need more info.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<link href="../style.css" rel="stylesheet" type="text/css" />
<title>Form for country</title>
<script type="text/javascript">
<!--
function hideAll() {
      var stDiv = document.getElementById('statesDiv');
      var prvDiv = document.getElementById('provinceDiv');
      var otherDiv = document.getElementById('otherDiv');
      stDiv.style.display = "none";
      prvDiv.style.display = "none";
      otherDiv.style.display = "none";
}

function showDiv(val) {
      var stDiv = document.getElementById('statesDiv');
      var prvDiv = document.getElementById('provinceDiv');
      var otherDiv = document.getElementById('otherDiv');
      stDiv.style.display = "none";
      prvDiv.style.display = "none";
      otherDiv.style.display = "none";
      switch (val) {
            case "us":
                  stDiv.style.display = "";
                  document.form1.state.focus();
                  break;
            case "can":
                  prvDiv.style.display = "";
                  document.form1.canada.focus();
                  break;
            case "other":
                  otherDiv.style.display = "";
                  document.form1.other.focus();
                  break;
            default:
                  document.form1.country.focus();
      }
}
//-->
</script>
<style type="text/css">
div {
      margin: 15px auto;
}
</style>
</head>

<body onload="hideAll();">
<h3>Fill out this</h3>
<form name="form1" id="form1" action="" method="post">
<div id="countryDiv">
Select a country:<br /><br />
<select name="country" id="country" onchange="showDiv(this.value);">
<option value="">Select a country</option>
<option value="us">United States</option>
<option value="can">Canada</option>
<option value="other">Other</option>
</select>
</div>
<div id="statesDiv">
Select a state:<br /><br />
<select name="state" id="state">
<option value="">Select a state</option>
<option value="wa">Washington</option>
<option value="or">Oregon</option>
<option value="ca">California</option>
</select>
</div>
<div id="provinceDiv">
Select a province:<br /><br />
<select name="canada" id="canada">
<option value="">Select a province</option>
<option value="ont">Ontario</option>
<option value="que">Quebec</option>
<option value="ns">Nova Scotia</option>
</select>
</div>
<div id="otherDiv">
Enter country: <input type="text" name="other" id="other" />
</div>

<br /><br />
<input type="submit" name="submit" value="Submit" />

</form>

</body>
</html>

bol
0
jen_jen_jenAuthor Commented:
Hmm,  This isn't working for me.  I should say that i have a complete list of countries, so my whole country dropdown menu has them all.  It's just that only Canada & the US will have prepolulated dropdown menus, the others can fil their region/province into a text box.

In any case, I tried creating a case for each value, so instead of:

            case "other":
                  otherDiv.style.display = "";
                  document.form1.other.focus();
                  break;


I have one for each non US and non Canada country:

case "AD":
otherDiv.style.display = "";
document.form1.other.focus();
break;
case "AE":
otherDiv.style.display = "";
document.form1.other.focus();
break;

and so on...

But if I select any other value other than US & Canada, the text box doesn't appear.
0
b0lsc0ttIT ManagerCommented:
Let me see the country select list.  The problem may be a case sensitive issue.

I would suggest that you change the switch so the default handles any other country and then make a new case for the value being "" (the first selection).  For example ...

      switch (val) {
            case "us":
                  stDiv.style.display = "";
                  document.form1.state.focus();
                  break;
            case "can":
                  prvDiv.style.display = "";
                  document.form1.canada.focus();
                  break;
            case "":
                  document.form1.country.focus();
                  break;
            default:
                  otherDiv.style.display = "";
                  document.form1.other.focus();
      }

If the list of countries isn't too long or you don't want to use the "default" case then you can still do it better.  Each country has a case but the script is only listed after the last, which also includes the break.  For example ...

case "ae":
case "ad":
    otherDiv.style.display = "";
    document.form1.other.focus();
    break;

Let me know how that works or if you have a question.

bol
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
b0lsc0ttIT ManagerCommented:
I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.