Solved

Javascript Price update

Posted on 2010-11-08
10
377 Views
Last Modified: 2012-05-10
Hi there,

I'm trying to make a product page that updates the price dependant on selections the user makes.

I followed the advice on http://www.daniweb.com/forums/thread277121.html, and it works absolutely great. My problem is though that I also have another radio button and one more drop down that i need to add into the mix. One radio button add 49.00 to the price the other adds 0.00.

The last dropdown is like the radio buttons, option one will add 28.00 to the total and option two will add 45.00, with option three adding 0.00 to total price.

Thanks in advance to anyone that can help me
Regards,
MsKazza
0
Comment
Question by:Karen Liddy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
10 Comments
 
LVL 19

Expert Comment

by:Bardobrave
ID: 34084114
Can you provide a link to the page or a screenshot and a brief description of the exact problem you're getting?
0
 

Author Comment

by:Karen Liddy
ID: 34086499
I want the price to update dynamically, i've managed to get the first two dropdown boxes to update, but don't know how to get the radio button or third option to update price.
First radio button should add 49.00 to price when selected, second one should add nothing.

The last dropdown should add the amounts as explained above in previous post.

The updated price is shown over on the thumbtacked note.

Hope this explains it
MsKazza
srnshot.jpg
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 34088871
Ok, lets see...

First you need to do is to identify the events on your page.

You want that radio checks change your value, so onClick event of both radioButtons you should fire a function to update price.

You should do the same with the second dropdown.

The best approach, from my point of view... will be have a function that is able to calculate the whole amount depending on selected objects, then, you can fire this function from the onClick event of checks and the onChange event of dropdowns.

That function will get the values of your selected objects through DOM, or, if you use jquery (wich I highly recommend due to it's easy of use and incredible power) through simple selectors.

var isCheckedFirstRadio = document.getElementById("firstRadioID").checked; // for standard JS
var secondDropDown = $("#secondDropDownId").val(); // for jquery

Once you know the current values of the objects you only need to sum the correspondent values to your total object and update it.

If your currency values are prone to change you should think on a different scenario, where you can read the currency values from database through an AJAX call, avoiding to hardcode currency values on code and having to change it manually each time a price varies.

I hope it helps, let me know if you need further help.
0
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 

Author Comment

by:Karen Liddy
ID: 34093342
Hi, thanks for the response, i'm actually a bit of a beginner when it comes to javascript, but this site has to be done in javasciprt.

Attached is what i have so far for the page.  Thanks.





<head>
<script type="text/javascript">
<!--

function changeDiv(the_div,the_change)
{
  var the_style = getStyleObject(the_div);
  if (the_style != false)
  {
    the_style.display = the_change;
  }
}

function hideAll()
{
  changeDiv("upload","none");
}

function getStyleObject(objectId) {
  if (document.getElementById && document.getElementById(objectId)) {
    return document.getElementById(objectId).style;
  } else if (document.all && document.all(objectId)) {
    return document.all(objectId).style;
  } else {
    return false;
  }
}
// -->
</script>

<script>
var prices = {
	'0' : {
		'0'  : '0.00',
		'250'  : '0.00',
		'500'  : '0.00',
		'1000' : '0.00',
		'2000' : '0.00',
		'3000' : '0.00',
		'4000' : '0.00',
		'5000' : '0.00',
		'10000' : '0.00',
		'15000' : '0.00',
		'20000' : '0.00'
	},
	'Full1' : {
		'0'  : '0.00',
		'250'  : '49.00',
		'500'  : '59.00',
		'1000' : '69.00',
		'2000' : '109.00',
		'3000' : '149.00',
		'4000' : '189.00',
		'5000' : '229.00',
		'10000' : '339.00',
		'15000' : '449.00',
		'20000' : '559.00'
	},
	'Full2' : {
		'0'  : '0.00',
		'250'  : '59.00',
		'500'  : '69.00',
		'1000' : '79.00',
		'2000' : '119.00',
		'3000' : '159.00',
		'4000' : '199.00',
		'5000' : '239.00',
		'10000' : '349.00',
		'15000' : '459.00',
		'20000' : '569.00'
	},
	'Double' : {
		'0'  : '0.00',
		'250'  : '89.00',
		'500'  : '99.00',
		'1000' : '109.00',
		'2000' : '149.00',
		'3000' : '189.00',
		'4000' : '229.00',
		'5000' : '269.00',
		'10000' : '379.00',
		'15000' : '489.00',
		'20000' : '599.00'
	},
	'Tripple' : {
		'0'  : '0.00',
		'250'  : '109.00',
		'500'  : '119.00',
		'1000' : '129.00',
		'2000' : '169.00',
		'3000' : '209.00',
		'4000' : '249.00',
		'5000' : '289.00',
		'10000' : '399.00',
		'15000' : '509.00',
		'20000' : '619.00'
	},
	'TrippleDouble' : {
		'0'  : '0.00',
		'250'  : '110.00',
		'500'  : '120.00',
		'1000' : '130.00',
		'2000' : '170.00',
		'3000' : '210.00',
		'4000' : '250.00',
		'5000' : '290.00',
		'10000' : '400.00',
		'15000' : '510.00',
		'20000' : '620.00'
	}
};
onload = function(){
	var f = document.buscard;
	var qtyEl = f.qty;
	var pagesEl = f.pages;
	var priceEl = document.getElementById('price');
	f.qty.onchange = f.pages.onchange = function(){
		var qty   = qtyEl[qtyEl.selectedIndex].value;
		var pages = pagesEl[pagesEl.selectedIndex].value
		priceEl.innerHTML = prices[pages][qty];
	};
	f.qty.onchange();//initialise price field for whatever values are selected on page load
};
</script>
</head>

<body>
<form name="buscard" method="" action="">
    <table width="100%" border="0" cellspacing="5" cellpadding="5">
      <tr>
        <td width="20%">&nbsp;</td>
        <td width="22%">&nbsp;</td>
        <td width="23%">&nbsp;</td>
        <td width="35%">&nbsp;</td>
      </tr>
      
      <tr>
        <td valign="top">Product:</td>
        <td valign="top">	<select name="pages">
		<option value="0">Please Select....</option>
		<option value="Full1">Full Colour One Side</option>
		<option value="Full2">Full Colour Both Sides</option>
		<option value="Double">Double Size or a Bookmark</option>
		<option value="Tripple">Tripple Colour Side</option>
		<option value="TrippleDouble">Tripple Colour Side Double</option>
	</select> </td>
        <td>&nbsp;</td>
        <td width="35%" height="281" rowspan="6" valign="top" background="images/bigthumbtack.jpg">
          <div align="center"><br />
            <br />
            <br /><br /><br />
            <span class="style2">Now Only</span><br />
            <br />
            </div>
          <div>
            <span class="style2"> <div align="center">Price: € <span id="price"></span></div></span>            </div>          </td>
      </tr>
      <tr>
        <td valign="top">Quantity:</td>
        <td valign="top"><select name="qty">
		<option value="0">Please Select....</option>
		<option value="250">250</option>
		<option value="500">500</option>
		<option value="1000">1,000</option>
		<option value="2000">2,000</option>
        <option value="3000">3,000</option>
		<option value="4000">4,000</option>
		<option value="5000">5,000</option>
		<option value="10000">10,000</option>
		<option value="15000">15,000</option>
		<option value="20000">20,000</option>

	</select></td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td valign="top">Artwork:</td>
        <td colspan="2" valign="top">
        <input type="radio" name="artwork" onClick="hideAll();">
        Professionally designed by Absolute Graphics <strong>(+€49)</strong> <br />
        <input type="radio" name="artwork" onClick="hideAll(); changeDiv('upload','block');">I will supply my own artwork<br />
        <div id="upload" style="margin-left:30px;display:none"><br />
If you have your own business card design upload it now.<br /><br />Please choose file to upload: <input type="file" name="upload" id="upload2" />
<br>
</div>    
<br /><br />
<script type="text/javascript" src="js/slidingpanel.js"></script>
<div>
   <div id="exampleHeader"
      style="position:relative;
           width:250px;
           height:20px;
           top:0px;
           left:0px;
           background:#ffffff;
           text-align:center;
           color:#600000;
           z-index:1;"
      onclick="runAnimation(animationObject, this)">
     <a href="#">Click Here for More Info on Artwork choices.</a>   </div>
   <div id="examplePanel"
      style="position:relative;
           width:150px;
           height:1px;
           top:-3px;
           left:0px;
           background:#ffffff;
           border-style:solid;
           border-color:#999999;
           border-width:1px;
           overflow:hidden;
           z-index:0;">
    <img src="images/slidedown.jpg" />   </div>
</div>

<script type="text/javascript">
var animationObject = new AnimationObject('examplePanel');
animationObject.AddFrame(new AnimationFrame(-100, 100, 500, 300, 500));

function runAnimation(animation, header)
{
  if(header.expanded)
  {
    animation.RunBackward();
    header.expanded = false;
  }
  else
  {
    animation.RunForward();
    header.expanded = true;
  }
}
</script><br />
<p>    </td>
        </tr>
      <tr>
        <td valign="top">Proof</td>
        <td valign="top"><select name="proof" id="proof">
          <option selected="selected">Please Select.....</option>
          <option value="email">Proof sent by Email</option>
          <option value="post">Proof sent by Regular Post</option>
                        </select></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
        <td valign="top">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
        <td valign="top">&nbsp;</td>
        <td><input type=button value='  Add to Cart  ' onclick='AddToCart(this.form)' /></td>
      </tr>
    </table>
    </form>
</body>

Open in new window

0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 34094046
Ok, let's see...

Here you assign your calculated value, you get it from your huge price matrix:
priceEl.innerHTML = prices[pages][qty];

Now you need to add more values to this... so, instead of assigning it directly, lets store it in a variable
var tempValue = prices[pages][qty];

After that you'd check if the first checkbox is checked, in that case you should increase your listed price:

if (document.getElementById("yourFirstCheckId").checked)
   tempValue += 49.00;

Checkboxes tend to be a bit weird in their behaviour, maybe you'll need a bit of googleing to fine tune this "if", but I'm sure that's nothing you cannot do.

And after that you need to increase another value depending on your third dropdown value.
So something like:

var yourThirdDropDownValue = document.getElementById("yourThirDropDownId").value;
switch (yourThirdDropDownValue) {
case "firstValue":  tempValue += 28.00;
                              break;
case "secondValue": tempValue += 49.00;
                             break;
case "thirdValue": tempValue += 0.00;
                              break;

Now you have the complete value on tempValue, so you can draw it.

priceEl.innerHtml = tempValue;

Ok, that's all... oh wait a minute... all? Not, you need to fire your calculating function also when the check is clicked and when your third dropdownlist is changed, so whenever any of the elements of your page changes it's values, your function will fire, recalculate the complete value and post it to the client browser.

I hope this helps you. Don't hesitate on asking further if you need it.

I also recommend you to take a look at jquery, is a javascript development framework that gives incredible potential to this type of developments, and it's really easy to use.
Take a look at it at: www.jquery.com -- Have fun.
0
 

Author Comment

by:Karen Liddy
ID: 34094812
Hi :)

Well i've obviously done something wrong, or not followed all instructions properly cause the price doesn't show up.  Hopefully you can point me in the right direction :)
thanks
products.html
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 34095476
You have added:
f.qty.onchange();//initialise price field for whatever values are selected on page load

at the end of your calculation function. I don't see really the point on this, you should change it for:
priceEl.innerHtml = tempValue;

I don't see where are you linking onClick and onChange events on your checkbox and thir dropdown to the function.

Remember, nothing like an alert to debug your javascript code. If you have doubts about your code execution entering in some point put an alert("Hello World") and see if it jumps.
0
 

Author Comment

by:Karen Liddy
ID: 34100868
thanks but managed to do it myself, i've attached my finished version.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type='text/javascript'>
var pricex = {
	'0' : {
		'0'  : '0.00',
		'250'  : '0.00',
		'500'  : '0.00',
		'1000' : '0.00',
		'2000' : '0.00',
		'3000' : '0.00',
		'4000' : '0.00',
		'5000' : '0.00',
		'10000' : '0.00',
		'15000' : '0.00',
		'20000' : '0.00'
	},
	'Full1' : {
		'0'  : '0.00',
		'250'  : '49.00',
		'500'  : '59.00',
		'1000' : '69.00',
		'2000' : '109.00',
		'3000' : '149.00',
		'4000' : '189.00',
		'5000' : '229.00',
		'10000' : '339.00',
		'15000' : '449.00',
		'20000' : '559.00'
	},
	'Full2' : {
		'0'  : '0.00',
		'250'  : '59.00',
		'500'  : '69.00',
		'1000' : '79.00',
		'2000' : '119.00',
		'3000' : '159.00',
		'4000' : '199.00',
		'5000' : '239.00',
		'10000' : '349.00',
		'15000' : '459.00',
		'20000' : '569.00'
	},
	'Double' : {
		'0'  : '0.00',
		'250'  : '89.00',
		'500'  : '99.00',
		'1000' : '109.00',
		'2000' : '149.00',
		'3000' : '189.00',
		'4000' : '229.00',
		'5000' : '269.00',
		'10000' : '379.00',
		'15000' : '489.00',
		'20000' : '599.00'
	},
	'Tripple' : {
		'0'  : '0.00',
		'250'  : '109.00',
		'500'  : '119.00',
		'1000' : '129.00',
		'2000' : '169.00',
		'3000' : '209.00',
		'4000' : '249.00',
		'5000' : '289.00',
		'10000' : '399.00',
		'15000' : '509.00',
		'20000' : '619.00'
	},
	'TrippleDouble' : {
		'0'  : '0.00',
		'250'  : '110.00',
		'500'  : '120.00',
		'1000' : '130.00',
		'2000' : '170.00',
		'3000' : '210.00',
		'4000' : '250.00',
		'5000' : '290.00',
		'10000' : '400.00',
		'15000' : '510.00',
		'20000' : '620.00'
	}
};

function totalise() {    
    var qtd   = document.getElementById('qt').value;
    var price  = document.getElementById('prices').value;
    var result = document.getElementById("total");
    //alert(pricex[price][qtd]);
    var TotalPrice = pricex[price][qtd]
    result.value = TotalPrice;
    
}
function addDesignPrice(val) {
    var result = document.getElementById("total");
    var FinalVal = (eval(result.value) + val) ;
    result.value = FinalVal.toFixed(2);
}
function hideAll() {}
    </script>

</head>
<body>
    <table>
        <tr>
            <td>
                <select id="qt" onchange="totalise()">
                    <option value="0">Please Select....</option>
                    <option value="250">250</option>
                    <option value="500">500</option>
                    <option value="1000">1,000</option>
                    <option value="2000">2,000</option>
                    <option value="3000">3,000</option>
                    <option value="4000">4,000</option>
                    <option value="5000">5,000</option>
                    <option value="10000">10,000</option>
                    <option value="15000">15,000</option>
                    <option value="20000">20,000</option>
                </select>
            </td>
            <td>
                <select id="prices" onchange="totalise()">
                    <option value="0">Please Select....</option>
                    <option value="Full1">Full Colour One Side</option>
                    <option value="Full2">Full Colour Both Sides</option>
                    <option value="Double">Double Size or a Bookmark</option>
                    <option value="Tripple">Tripple Colour Side</option>
                    <option value="TrippleDouble">Tripple Colour Side Double</option>
                </select>
            </td>
            <td>
                <input type="radio" name="artwork" onclick="hideAll();addDesignPrice(49);">
                Professionally designed by Absolute Graphics <strong>(+€49)</strong>
                <br />
                <input type="radio" name="artwork" onclick="hideAll(); changeDiv('upload','block');">I
                will supply my own artwork<br />
                <div id="upload" style="margin-left: 30px; display: none">
                    <br />
                    If you have your own business card design upload it now.<br />
                    <br />
                    Please choose file to upload:
                    <input type="file" name="upload" id="upload2" />
                </div>
            </td>
            <td>
                <input id="total" type="text" readonly />
            </td>
        </tr>
    </table>
</body>
</html>

Open in new window

0
 
LVL 19

Accepted Solution

by:
Bardobrave earned 500 total points
ID: 34101273
I think that my collaboration in the resolution of the problem pointed user towards success.

I understand that we are supose to help, not to do someone's work
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question