Solved

Form elements depend upon selection....

Posted on 2007-04-04
5
166 Views
Last Modified: 2012-08-14
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
Comment
Question by:jen_jen_jen
  • 4
5 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18853926
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18854333
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
 

Author Comment

by:jen_jen_jen
ID: 18855464
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
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 500 total points
ID: 18858865
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18977308
I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question