Hi folks,
Hope someone can help. I use a form in our shopping cart which when the form select fields are clicked, the javascript allows information such as a second dropdown form enclosed in a specific div to be revealed to the user. Works fine and here is the javascript code with the body code below ....
<head>
<script type="text/javascript">
window.onload=function() { attachBehaviors(); };
function attachBehaviors() {
if (document.getElementById('productpr1')) {
document.getElementById('productpr1').onchange=function() {
Display(this,this.selectedIndex);
};
}
}
function Display(obj,selind) {
if (! document.getElementById(obj.id)) {
alert('Oops! Something is not id\'ed correctly ' + obj.id);
return;
}
var divs = Array('a1-div','a2-div');
var opts = obj.options[selind].value.split(':');
var div = opts[opts.length-1]; // takes last item, arrays are zero based.
for (j=0;j<divs.length;j++) {
if (document.getElementById(divs[j])) {
document.getElementById(divs[j]).style.display=
(divs[j]==div)?'block':'none';
}
}
}
</script>
</head>
<body>
<form action="xxxxx" method="post" name="form1">
<input type="hidden" name="userid" value="9437628">
<input type="hidden" name="return" value="xxxx/scripts/cart.php">
<p style="text-align:center;">Option :
<input type="hidden" value="1" name="qty1">
<select name="productpr1" id="productpr1">
<option selected value="">please select</option>
<option value="2 seater fabric sofabed:539:a1-div">2 seater fabric sofabed</option>
<option value="2 seater leather sofa:499:a2-div">2 seater leather sofa</option>
</select>
</p>
<p id="a1-div" style="display:none;text-align:center;">
<select name="product1[]" id="product1-select">
<option selected value="">please select</option>
<option value=", anthracite fabric">fabric : anthracite</option>
<option value=", beige fabric">fabric : beige</option>
</select>
</p>
<p id="a2-div" style="display:none;text-align:center;">
<select name="product1[]" id="product2-select">
<option selected value="">please select</option>
<option value=", bitter leather">leather : bitter</option>
<option value=", chestnut leather">leather : chestnut</option>
</select>
</p>
</p>
</form>
</body>
Now what I need to do is allow the script to select multiple divs when a certain option is selected on the first form 'option selected value' field.
As a working example, this would allow a user to select '2 seater fabric sofabed' and have the options revealed in divs as say 'div id="colour"',
'div id="delivery"', and 'div id="stainguard"
Wereas if '2 seater leather sofa' was selected just the first 2 divs would be revealed as stainguard div would not be required.
Any ideas how I can modify the code to allow this ?
Kind regards to all.
Chris
Hope someone can help. I use a form in our shopping cart which when the form select fields are clicked, the javascript allows information such as a second dropdown form enclosed in a specific div to be revealed to the user. Works fine and here is the javascript code with the body code below ....
<head>
<script type="text/javascript">
window.onload=function() { attachBehaviors(); };
function attachBehaviors() {
if (document.getElementById('productpr1')) {
document.getElementById('productpr1').onchange=function() {
Display(this,this.selectedIndex);
};
}
}
function Display(obj,selind) {
if (! document.getElementById(obj.id)) {
alert('Oops! Something is not id\'ed correctly ' + obj.id);
return;
}
var divs = Array('a1-div','a2-div');
var opts = obj.options[selind].value.split(':');
var div = opts[opts.length-1]; // takes last item, arrays are zero based.
for (j=0;j<divs.length;j++) {
if (document.getElementById(divs[j])) {
document.getElementById(divs[j]).style.display=
(divs[j]==div)?'block':'none';
}
}
}
</script>
</head>
<body>
<form action="xxxxx" method="post" name="form1">
<input type="hidden" name="userid" value="9437628">
<input type="hidden" name="return" value="xxxx/scripts/cart.php">
<p style="text-align:center;">Option :
<input type="hidden" value="1" name="qty1">
<select name="productpr1" id="productpr1">
<option selected value="">please select</option>
<option value="2 seater fabric sofabed:539:a1-div">2 seater fabric sofabed</option>
<option value="2 seater leather sofa:499:a2-div">2 seater leather sofa</option>
</select>
</p>
<p id="a1-div" style="display:none;text-align:center;">
<select name="product1[]" id="product1-select">
<option selected value="">please select</option>
<option value=", anthracite fabric">fabric : anthracite</option>
<option value=", beige fabric">fabric : beige</option>
</select>
</p>
<p id="a2-div" style="display:none;text-align:center;">
<select name="product1[]" id="product2-select">
<option selected value="">please select</option>
<option value=", bitter leather">leather : bitter</option>
<option value=", chestnut leather">leather : chestnut</option>
</select>
</p>
</p>
</form>
</body>
Now what I need to do is allow the script to select multiple divs when a certain option is selected on the first form 'option selected value' field.
As a working example, this would allow a user to select '2 seater fabric sofabed' and have the options revealed in divs as say 'div id="colour"',
'div id="delivery"', and 'div id="stainguard"
Wereas if '2 seater leather sofa' was selected just the first 2 divs would be revealed as stainguard div would not be required.
Any ideas how I can modify the code to allow this ?
Kind regards to all.
Chris
Last edited by a moderator:
