Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 191
  • Last Modified:

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
0
jen_jen_jen
Asked:
jen_jen_jen
  • 4
1 Solution
 
b0lsc0ttCommented:
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
 
b0lsc0ttCommented:
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
 
b0lsc0ttCommented:
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
 
b0lsc0ttCommented:
I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now