...

View Full Version : Multi function values



stamps
05-28-2009, 11:15 AM
I'm pretty new to Javascript and I'm trying to build a form which gives a configuration for a product.

It consists of 5 drop down menus and each value in the drop down needs to have an image, a price, and a rule attached to it.

The image sits above the drop down and changes with the selection, the price adds to the option prices selected in the other drop downs and give a total, and the rule affects what options are available in subsequent drop downs.

I've got all of these working seperatly but can't get a single value to have all 3 functions.

If anyone's done something similar or knows a way of doing it that any tips would be great!

Thanks.

itsallkizza
05-28-2009, 04:42 PM
Show us what code you have so far and maybe we can help.

jmrker
05-28-2009, 04:43 PM
You didn't give much to go on :rolleyes:, but see if you can modify this to your needs: :)


<html>
<head>
<title>SBox Modifier</title>
<script type="text/javascript">
// For: document.getElementById('productImage').src = ImgCostRate[0];

var basePrice = 10.00;
function modifyBaseProduct(info) {
var sum = basePrice*1;
ImgCostRate = info.split(':');
document.getElementById('productImage').src = ImgCostRate[0];
document.getElementById('productImage').alt = ImgCostRate[0];
sum += ImgCostRate[1]*1; // add to price
sum *= ImgCostRate[2]*1; // tax of inflation
document.getElementById('baseProduct').value = sum.toFixed(2);
}
</script>
</head>
<body>
<image id="productImage" src="" alt="Product" height="100" width="150"><br>
<input type="text" id="baseProduct" value="10.00" readonly><br>
<select id="baseModifier" onchange="modifyBaseProduct(this.value)">
<!-- img1.jpg:price:rule -->
<option value="baseImage0.jpg:0.00:1.00">Basic Model</option>
<option value="baseImage1.jpg:2.50:1.05">Upgrade 1</option>
<option value="baseImage2.jpg:5.00:1.1">Upgrade 2</option>
<option value="baseImage3.jpg:7.50:1.25">Upgrade 3</option>
<option value="baseImage4.jpg:10.00:1.50">Upgrade 4</option>
</select>
</body>
</html>

Modify rules to your needs or create a switch() condition.
Add images and rename in option values.

Good Luck!
:)

stamps
05-29-2009, 09:29 AM
Thanks for the replys - apologies for not posting more details!

Cheers for your help jmrker, I'm going to start working with that code ... unless you see the script below and see a better way?

Here are the 3 parts of script I've got so far:

Image change


<body>
<table cellpadding="0" cellspacing="0" width="600" align="center" font face="Verdana" id="table1">
<tr>
<td width="40" rowspan="2">&nbsp;</td>
<td width="170">
<p align="center">
<img id="Img1" src="http://..." width=170 height=155 ></td>
<td width="180">
<p align="center">
<img id="Img2" src="http://..." width=180 height=155 ></td>
<td width="170">
<img id="Img3" src="http://..." width=170 height=155 ></td>
<td width="40" rowspan="2">&nbsp;</td>
</tr>
<tr>
<td width="170">
<p align="center"><FONT face=Tahoma>
<select onchange="CngColor(this);">
<option>Select option</option>
<option value="option1-1-1.gif">Option 1</option>
<option value="option2.gif" >Option 2</option>
<option value="build1.gif" >Reset</option>
</select></FONT></td>
<td width="180">
<p align="center"><FONT face=Tahoma>
<select onchange="Cngimage(this);">
<option>Select option</option>
<option value="option1-2.gif" >Option 1</option>
<option value="option2-2.gif" >Option 2</option>
<option value="build2.gif" >Reset</option>
</select></FONT></td>
<td width="170">
<p align="center"><FONT face=Tahoma>
<select onchange="Cngimage3(this);" name="D1">
<option>Select option</option>
<option value="option1-3.gif" >Option 1</option>
<option value="option2-3.gif" >Option 2</option>
<option value="build3.gif" >Reset</option>
</select></FONT></td>
</tr>
</table>
</body>

<script language="JavaScript" type="text/javascript">
<!--
var Path='http://...';

function CngColor(obj){
index=obj.selectedIndex;
if (index<1){ return; }
document.getElementById('Img1').src=Path+obj.options[index].value;
}
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
var Path='http://...';

function Cngimage(obj){
index=obj.selectedIndex;
if (index<1){ return; }
document.getElementById('Img2').src=Path+obj.options[index].value;
}
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
var Path='http://...';

function Cngimage3(obj){
index=obj.selectedIndex;
if (index<1){ return; }
document.getElementById('Img3').src=Path+obj.options[index].value;
}
//-->
</script>

Price Change


<form id="total" name="total">
<tr><td>
<input type="checkbox" id="dropDownState1" name="group1" value="A01_120" onclick="checkLimit(this);enableDropDown(1)">
<select id="dropDownList1" disabled onchange="calc();">
<option value="100">Product</option>
<option value="150">Product 2</option>
<option value="200">Product 3</option>
<option value="250">Product 4</option>
</select>
</td></tr>
<tr><td>
<input type="checkbox" id="dropDownState2" name="group2" value="B03_400" onclick="checkLimit(this);enableDropDown(2)">
<select id="dropDownList2" disabled onchange="calc();">
<option value="50">Option 1</option>
<option value="350">Option 2</option>
<option value="180">Option 3</option>
<option value="200">Option 4</option>
</select>
</td></tr>
<tr><td>
<input type="checkbox" id="dropDownState3" name="group3" value="C05_700" onclick="checkLimit(this);enableDropDown(3)">
<select id="dropDownList3" disabled onchange="calc();">
<option value="190">Option 1</option>
<option value="220">Option 2</option>
<option value="270">Option 3</option>
<option value="310">Option 4</option>
</select>
</td></tr>
<tr><td>Total Value <input readonly onfocus="blur()" type="text" size="4" name="total"></td</tr></form>

<script language="JavaScript" type="text/javascript">
<!--
var MaxLimit = 3;
function enableDropDown(el)
{
if (document.getElementById('dropDownState'+el).checked)
{
document.getElementById('dropDownList'+el).disabled=false;
}
else
{
document.getElementById('dropDownList'+el).disabled=true;
}
calc();
}
function calc(){
totalValue=0;
for (var i=1; i<=3; i++) {
if(document.getElementById('dropDownState'+i).checked==true){
totalValue +=Number(document.forms[0]['dropDownList'+i].options[document.forms[0]['dropDownList'+i].selectedIndex].value);
}
}
document.forms[0].total.value=totalValue;
}
function checkLimit(cbObj) {
var obj;
var count = 0;
for (var i=0; i<document.forms[0].elements.length; i++) {
obj = document.forms[0].elements[i];
if (obj.checked) {
count++;
}
}
if (count > MaxLimit) {
cbObj.checked = false;
alert("The amount of selections (" + MaxLimit + ") are exceeded.");
}
}
//-->
</script>


Option change


<form name="rules">
<select name="products" size="4" onChange="updateoptions(this.selectedIndex)" style="width: 150px">
<option selected>Select A Product</option>
<option value="product1">Product 1</option>
<option value="product2">Product 2</option>
<option value="product3">Product 3</option>
</select>

<select name="options" size="4" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)">
</select>
</form>

<script type="text/javascript">

var productslist=document.rules.products
var optionslist=document.rules.options

var options=new Array()
options[0]=""
options[1]=["Option 1|option1value", "Option 2|option2value", "Option 3|option3value"]
options[2]=["Option 1-2|option1-2value", "Option 2-2|option2-2value", "Option 3-2|option3-2value"]
options[3]=["Option 1-3|option1-3value", "Option 2-3|option2-3value", "Option 3-3|option3-3value"]

function updateoptions(selectedoptiongroup){
optionslist.options.length=0
if (selectedoptiongroup>0){
for (i=0; i<options[selectedoptiongroup].length; i++)
optionslist.options[optionslist.options.length]=new Option(options[selectedoptiongroup][i].split("|")[0], options[selectedoptiongroup][i].split("|")[1])
}
}

</script>

jmrker
05-29-2009, 04:55 PM
Thanks for the replys - apologies for not posting more details!

Cheers for your help jmrker, I'm going to start working with that code ... unless you see the script below and see a better way?


You're most welcome.
Glad I was able to help.

Since I'm not sure of what your final goal is, I'll let you continue as you see fit
and comment on the final product (excuse the pun) when you are happy with the results.

Good Luck!
:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum