Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Multi function values

    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.

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Show us what code you have so far and maybe we can help.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,076
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up Consider this ...

    You didn't give much to go on , but see if you can modify this to your needs:
    Code:
    <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!

  • Users who have thanked jmrker for this post:

    stamps (05-29-2009)

  • #4
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

    Code:
    <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

    Code:
    <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

    Code:
    <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>

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,076
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up Keep Codin' ...

    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •