Solved

Javascript Dependent Drop Downs Problem

Posted on 2004-04-20
4
802 Views
Last Modified: 2007-12-19
Hi there,

I am trying to create dependent drop down boxes, using javascript, but having difficulty sending the value when the form is submitted.  Currently, my form has two drop down boxes, and depending on what is chosen from the first drop down box, populates the options in the second drop down box.  This is all working fine.  My only issue is that, when the form is submitted, I need to be able to retrieve the value that was selected in the second drop down box via a request.form comand. Please see the code below for reference.

Any assistance is greatly appreciated.  Thanks, in advance for your help!

Best Regards,

Caleb


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
var ask = "-Select-";

var Floral = new Array("Cherry Blossom Rectangle 6.6oz","Floral Leaves Round 5.1oz","Hummingbird with Lily Oval 5.6oz","Chrysanthemum Oval 4.0oz","Rose 3.75oz","Double Rose 3.0oz","Hibiscus Square 5.0oz","Daisy Square 3.0oz","3D Daisy 4.0oz","3D Rose 4.0oz","Dutch Iris 4.0oz","Bearded Iris 5.5oz","Japanese Iris 5.5oz","Lily of the Valley Rectangle 4.2oz","Tulip Rectangle 4.2oz");
var Miscellaneous = new Array("American Flag 5.5oz","Smiley Face Square 5.0oz","Gift Box with Bow 3.5oz");
var Fruits = new Array("Grape Cluster on Branch 4.75oz","Grapes 3.0oz","Apple 5.0oz","Cherry Cluster 3.0oz","Raspberry Cluster 2.5oz","Peach on a Branch 2.5oz","Lemon 2.0oz","Lime 2.0oz");
var Thanksgiving = new Array("Turkey 3.5oz","Turkey Round 3.0oz","Pumpkin/Corn Round 3.0oz");

function dropChange(theSelect, targetSelect)
{
   
    txt = theSelect.options[theSelect.selectedIndex].text;
    if(txt=="Floral")
        theArray = Floral;
    else if(txt=="Fruits")
        theArray = Fruits;
    else if(txt=="Thanksgiving")
        theArray = Thanksgiving;  
    else if(txt=="Miscellaneous")
        theArray = Miscellaneous;    
      else
        theArray = Floral;

    addOption(targetSelect, theArray);
}

function addOption(the_select, the_array)
{
  the_select.options.length = 0;
  the_select.options[0] = new Option(ask, 0);
  for (loop=1; loop < the_array.length+1; loop++)
  {
    the_select.options[loop] = new Option(the_array[loop-1], the_array[loop-1]);
      the_select.options[loop].value = new Option(the_array[loop-1], the_array[loop-1]);
  }
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
  <select name="select" onChange="javascript:dropChange(this, this.form.select2)">
    <option value="Floral">Floral</option>
    <option value="Fruits">Fruits</option>
    <option value="Miscellaneous">Miscellaneous</option>
    <option value="Thanksgiving">Thanksgiving</option>
  </select>
  <br>
  <select name="select2">
  </select>
</form>
</body>
</html>
0
Comment
Question by:calebic
[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 Comments
 
LVL 6

Expert Comment

by:Lord_McFly
ID: 10875315
Firstly if you want to use the Response.Form method then the page needs to be an ASP page.

Change the page from *.htm to *.asp then include the following before the <html> tag. This also includes the code for collecting the value of the listbox.

<%@ Language=VBScript %>
<%Option Explicit%>
<%
Dim sValue

If Request.Form("Button") = "Submit" then
      sValue = Request.Form("select2")
      
      If sValue <> "" then
            'What would you like to do here
            Response.Redirect "Value from form: " & Response.Write & "<br>"
      End If
End If
%>

The add a submit button to your form...

<input type="submit" name="Button" value="Submit">
0
 
LVL 19

Expert Comment

by:dakyd
ID: 10875599
If you still want to use javascript, and all you need is to figure out which option was selected, then you can use the following function:

function getVal() {
  myIndex = document.forms[0].select2.selectedIndex;
  myVal = document.forms[0].select2.options[myIndex].text;

  // do whatever you need to do with myVal down here
}

then change the form - it just calls myHandle() when the submit button is pressed:
<form name="form1" method="post" action="javascript:myHandle()">
  <select name="select" onChange="javascript:dropChange(this, this.form.select2)">
    <option value="Floral">Floral</option>
    <option value="Fruits">Fruits</option>
    <option value="Miscellaneous">Miscellaneous</option>
    <option value="Thanksgiving">Thanksgiving</option>
  </select>
  <br>
  <select name="select2">
  </select>
  <input type="submit">
</form>

not sure if that's what you're looking for, but I hope that helped.
0
 
LVL 9

Accepted Solution

by:
pepsichris earned 500 total points
ID: 10876708
Where you're going wrong is in trying to add the Value to Select2 when you've already done it.

Take out the line:

     the_select.options[loop].value = new Option(the_array[loop-1], the_array[loop-1]);

...and then you can retrieve that through some simple ASP:

<%
Dim sSelect1, sSelect2

sSelect1 = Request.Form("select")
sSelect2 = Request.Form("select2")
     
 Response.Write("The first drop down says: " & sSelect1 & "<br />")
 Response.Write("The second drop down says: " & sSelect2)

%>

Incidentally, you might want to change your body tag to:

 onload="dropChange(document.form1.select, document.form1.select2)"

So the second list gets populated straight away, and therefore looks nicer.
0
 

Author Comment

by:calebic
ID: 10884603
Thank you so much!

I really appreciate your help!  You were right on!

Best Regards,

Caleb
0

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

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

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

705 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