Link to home
Start Free TrialLog in
Avatar of ma701sss
ma701sss

asked on

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
Avatar of dfu23
dfu23

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>
Avatar of Jeffrey Dake
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>
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.
Avatar of ma701sss

ASKER

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?
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>
unless ma701sss says otherwise I agree
ASKER CERTIFIED SOLUTION
Avatar of Computer101
Computer101
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial