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
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
Another Option would be to have:
<select id="dd1" onclick="updateProduct()">
<option value="BLACK">BLACK</optio n>
<option value="BLUE">BLUE</option>
<option value="GREEN">GREEN</optio n>
</select>
<select id="dd2" onlclick="updateProduct()" >
<option value="SMALL">SMALL</optio n>
<option value="MEDIUM">MEDIUM</opt ion>
<option value="LARGE">LARGE</optio n>
</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("d d1");
var option2 = document.getElementById("d d2");
var product = document.getElementById("p roductID") ;
var option1Value = option1.options[option1.se lectedInde x];
var option2Value = option2.options[option2.se lectedInde x];
if(option1Value == 'Black' && optionValue2 == 'Small')
product.value = 'Product 1';
else if .........
// all other products. Or whatever mapping you want to use.
alert(products);
}
</script>
<select id="dd1" onclick="updateProduct()">
<option value="BLACK">BLACK</optio
<option value="BLUE">BLUE</option>
<option value="GREEN">GREEN</optio
</select>
<select id="dd2" onlclick="updateProduct()"
<option value="SMALL">SMALL</optio
<option value="MEDIUM">MEDIUM</opt
<option value="LARGE">LARGE</optio
</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("d
var option2 = document.getElementById("d
var product = document.getElementById("p
var option1Value = option1.options[option1.se
var option2Value = option2.options[option2.se
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.
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?
How can this be done simply?
ASKER
I ended up using this code:
<script>
function checkForm()
{
var colour = document.getElementById('i tem1');
var size = document.getElementById('i tem2');
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>
<script>
function checkForm()
{
var colour = document.getElementById('i
var size = document.getElementById('i
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<select id="dd1">
<option value="BLACK">BLACK</optio
<option value="BLUE">BLUE</option>
<option value="GREEN">GREEN</optio
</select>
<select id="dd2">
<option value="SMALL">SMALL</optio
<option value="MEDIUM">MEDIUM</opt
<option value="LARGE">LARGE</optio
</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("d
var options2 = document.getElementById("d
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>