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?
 
b0lsc0ttConnect With a Mentor IT 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
 
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:
I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.