Solved

Form elements depend upon selection....

Posted on 2007-04-04
5
177 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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…

691 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