Solved

Javascript Price update

Posted on 2010-11-08
10
364 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
  • 5
  • 4
10 Comments
 
LVL 19

Expert Comment

by:Bardobrave
Comment Utility
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
Comment Utility
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
Comment Utility
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
 

Author Comment

by:Karen Liddy
Comment Utility
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 19

Expert Comment

by:Bardobrave
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn how to count occurrences of each item in an array.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

743 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now