Solved

Javascript Dependent Drop Downs Problem

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Uploading files to the web server has become common part of almost any kind of web application. People use different technologies to solve this, but regardless of the technology used, it is always useful to have some kind of progress indicator shown…
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.
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

760 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now