Solved

Javascript Dependent Drop Downs Problem

Posted on 2004-04-20
4
797 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
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

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