Solved

Javascript Dependent Drop Downs Problem

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
show form submit button based on jquery sum 5 53
I am having a  Git   issue 6 60
window close link 7 32
WordPress Page Content Lost 2 13
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
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.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

685 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