• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 175
  • Last Modified:

Dropdown boxes

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
ma701sss
Asked:
ma701sss
  • 2
  • 2
  • 2
  • +1
1 Solution
 
dfu23Commented:
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
 
Jeffrey Dake Senior Director of TechnologyCommented:
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
 
Jeffrey Dake Senior Director of TechnologyCommented:
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
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
ma701sssAuthor Commented:
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
 
ma701sssAuthor Commented:
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
 
dfu23Commented:
unless ma701sss says otherwise I agree
0
 
Computer101Commented:
PAQed with points refunded (250)

Computer101
EE Admin
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now