?
Solved

Dropdown boxes

Posted on 2007-08-01
8
Medium Priority
?
174 Views
Last Modified: 2010-04-16
I have 2 selection boxes:

1. BLACK, BLUE, GREEN
2. SMALL, MEDIUM, LARGE

I would like a way to be able to submit every comination of colour and size to a form. Example:

'Product1' = "Black, Small"
'Product2' = "Black, Medium"
'Product3' = "Blue, Large"
...
etc.

So I would submit the value 'Product1' to the form for example.

If somebody could post the code to do this (javascript?), then I will award the points to the best code.

Thanks
0
Comment
Question by:ma701sss
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 14

Expert Comment

by:dfu23
ID: 19613698
let's say the dropdowns have ID's of dd1 and dd2, for example:

<select id="dd1">
  <option value="BLACK">BLACK</option>
  <option value="BLUE">BLUE</option>
  <option value="GREEN">GREEN</option>
</select>

<select id="dd2">
  <option value="SMALL">SMALL</option>
  <option value="MEDIUM">MEDIUM</option>
  <option value="LARGE">LARGE</option>
</select>

you could make a javascript function that would loop through each dropdown's options:

<script type="text/javascript">
function loopDropDowns() {
  var products = "";

  var options1 = document.getElementById("dd1").getElementsByTagName("option");
  var options2 = document.getElementById("dd2").getElementsByTagName("option");

  for (var i = 0; i < options1.length; i++) {
    for (var j = 0; i < options2.length; j++) {
      products += options1[i].value + " : " + options[2].value + "\n";
    }
  }

  alert(products);
}
</script>
0
 
LVL 11

Expert Comment

by:Jeffrey Dake
ID: 19614868
Another Option would be to have:

<select id="dd1" onclick="updateProduct()">
  <option value="BLACK">BLACK</option>
  <option value="BLUE">BLUE</option>
  <option value="GREEN">GREEN</option>
</select>

<select id="dd2" onlclick="updateProduct()">
  <option value="SMALL">SMALL</option>
  <option value="MEDIUM">MEDIUM</option>
  <option value="LARGE">LARGE</option>
</select>

<input type="hidden" id="productID"/>

you could make a javascript function that would loop through each dropdown's options:

<script type="text/javascript">
function updateProduct() {

  var option1 = document.getElementById("dd1");
  var option2 = document.getElementById("dd2");
  var product = document.getElementById("productID");

  var option1Value = option1.options[option1.selectedIndex];
  var option2Value = option2.options[option2.selectedIndex];

  if(option1Value == 'Black' && optionValue2 == 'Small')
       product.value = 'Product 1';
  else if .........  
        // all other products.  Or whatever mapping you want to use.  
     

  alert(products);
}
</script>
0
 
LVL 11

Expert Comment

by:Jeffrey Dake
ID: 19618040
I don't know what you end goal doing this is, but you may not want to even use a script to do this.  It really sounds like something that can be processed server side instead of client side.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:ma701sss
ID: 19676027
Hi, sorry - have been away. Thanks for the code. My goal is this: All I want to do is to stop the form being submitted if the user selects "BLUE" and "SMALL".

How can this be done simply?
0
 

Author Comment

by:ma701sss
ID: 19676063
I ended up using this code:

 <script>
function checkForm()
{
  var colour = document.getElementById('item1');
  var size = document.getElementById('item2');
  if(colour.value=="BLUE" && size.value=="SMALL")
  {
    alert("Sorry, this colour and size combination is currently out of stock!");
      //Returning true! the form will submit.
    return false;
  }
  else
  {
    return true;
  }
}
</script>
0
 
LVL 14

Expert Comment

by:dfu23
ID: 20182405
unless ma701sss says otherwise I agree
0
 
LVL 1

Accepted Solution

by:
Computer101 earned 0 total points
ID: 20210783
PAQed with points refunded (250)

Computer101
EE Admin
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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 how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses
Course of the Month16 days, 5 hours left to enroll

850 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