Solved

Checkbox onclick (check it) hide and add price to total, onclick (uncheck it) show and remove price from total

Posted on 2008-10-13
4
921 Views
Last Modified: 2012-05-05
My test page to show what I got so far is: www.buildmethebest.com/intel_customdesktop.php

Scroll down to the category "Extras"

I have 3 independent checkboxes. I want each checkbox to add a price to the total on checking it and remove the [ +price ] and then on unchecking it, it removes the price from the total and puts back the [ +price ].

Right now it only does adding the price to the total and removing the [ +price ] upon clicking the box regardless of whether you are checking it or unchecking it.

The onCheckItem function is located in scripts/prices.js

Included is first the html code of the checkboxes, then the javascript. THANK YOU :)
HTML CODE:
 
<input type="checkbox" name="CableManagement" onclick="onCheckItem(16,2);" onmouseover="document.getElementById('image_extras').src='images/cablemanagement.jpg'">
                    Professional Cable Management (Improve the look of your system while increasing airflow!)<span id='PriceLabel_16_2'> <b>[ +19 ]</b></span><br>
					<input type="checkbox" name="ArcticSilver" onclick="onCheckItem(17,2);" onmouseover="document.getElementById('image_extras').src='images/arctic silver_5.jpg'">
                    Arctic Silver 5 thermal compound applied to all heatsinks and CPU<span id='PriceLabel_17_2'> <b>[ +9 ]</b></span><br>
					<input type="checkbox" name="Overclocking" onclick="onCheckItem(18,2);" onmouseover="document.getElementById('image_extras').src='images/overclock.jpg'">
                    Overclocking  Overclock my CPU to highest stable frequency<span id='PriceLabel_18_2'> <b>[ +19 ]</b></span><br>
 
 
 
 
JAVASCRIPT CODE:
 
var CurrentPrice = 1237;
  var PriceComponent = new Array();
  PriceComponent['1'] = new Array(); // Case category
  PriceComponent['1']['1'] = 140;
  PriceComponent['1']['2'] = 160;
 ................................. (lots more variables not relevant to this problem)
 PriceComponent['16'] = new Array(); // Extras: Cable Management
  PriceComponent['16']['1'] = 0; // price to the user without it checked
  PriceComponent['16']['2'] = 19; // price to the user with it checked
  PriceComponent['17'] = new Array(); // Extras: Arctic Silver 5
  PriceComponent['17']['1'] = 0; // price to the user without it checked
  PriceComponent['17']['2'] = 9; // price to the user with it checked
  PriceComponent['18'] = new Array(); // Extras: Overclocking
  PriceComponent['18']['1'] = 0; // price to the user without it checked
  PriceComponent['18']['2'] = 19; // price to the user with it checked
 
  var Default = new Array();
  Default['1'] = '14';
................
  Default['16'] = '1';
  Default['17'] = '1';
  Default['18'] = '1';
 
  // this function appears in the oncheckitem function, just so you know what it does in case you were wondering
  function SetLayerText(sLayerId, sText) {
    document.getElementById(sLayerId).innerHTML = sText
  }
 
 
function onCheckItem(CatId,ItemId) {
	if (!this.checked) {
		SetLayerText("PriceLabel_" + CatId + "_" + ItemId, "");
		CurrentPrice += PriceComponent[CatId][ItemId];
		
	}
	else {
		var PriceDisplay = " <b>[ +" + PriceComponent[CatId][ItemId] + " ]</b>";
		SetLayerText("PriceLabel_" + CatId + "_" + ItemId, PriceDisplay);
		CurrentPrice -= PriceComponent[CatId][ItemId];
	}
	
	TotalPrice = " <b>[ " + CurrentPrice + " ]</b>";
	SetLayerText("TotalPriceLabel", TotalPrice);
    // Update Default Item
    Default[CatId] = ItemId;
}

Open in new window

0
Comment
Question by:Doomtomb
[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
  • 2
4 Comments
 
LVL 16

Accepted Solution

by:
Peter Kwan earned 500 total points
ID: 22701102
The this.checked is undefined.

Following code may work for you:

Javascript code:
function onCheckItem(Item, CatId,ItemId) {
 if (Item.checked) {
                SetLayerText("PriceLabel_" + CatId + "_" + ItemId, "");
                CurrentPrice += PriceComponent[CatId][ItemId];
               
        }
        else {
                var PriceDisplay = " <b>[ +" + PriceComponent[CatId][ItemId] + " ]</b>";
                SetLayerText("PriceLabel_" + CatId + "_" + ItemId, PriceDisplay);
                CurrentPrice -= PriceComponent[CatId][ItemId];
        }
       
        TotalPrice = " <b>[ " + CurrentPrice + " ]</b>";
        SetLayerText("TotalPriceLabel", TotalPrice);
    // Update Default Item
    Default[CatId] = ItemId;

}

HTML code:

                    <input type="checkbox" name="CableManagement" onclick="onCheckItem(this,16,2);" onmouseover="document.getElementById('image_extras').src='images/cablemanagement.jpg'">
                    Professional Cable Management (Improve the look of your system while increasing airflow!)<span id='PriceLabel_16_2'> <b>[ +19 ]</b></span><br>
                              <input type="checkbox" name="ArcticSilver" onclick="onCheckItem(this,17,2);" onmouseover="document.getElementById('image_extras').src='images/arctic silver_5.jpg'">
                    Arctic Silver 5 thermal compound applied to all heatsinks and CPU<span id='PriceLabel_17_2'> <b>[ +9 ]</b></span><br>
                              <input type="checkbox" name="Overclocking" onclick="onCheckItem(this,18,2);" onmouseover="document.getElementById('image_extras').src='images/overclock.jpg'">
                    Overclocking  Overclock my CPU to highest stable frequency<span id='PriceLabel_18_2'> <b>[ +19 ]</b></span><br>
0
 
LVL 4

Expert Comment

by:sijishJohn
ID: 22701134
hi Doomtomb,

change your javascript like this...
function onCheckItem(CatId,ItemId) 
{
    if (this.document.activeElement.checked) 
    {
        SetLayerText("PriceLabel_" + CatId + "_" + ItemId, "");
        CurrentPrice += PriceComponent[CatId][ItemId];                
    }
    else 
    {
        var PriceDisplay = " <b>[ +" + PriceComponent[CatId][ItemId] + " ]</b>";
        SetLayerText("PriceLabel_" + CatId + "_" + ItemId, PriceDisplay);
        CurrentPrice -= PriceComponent[CatId][ItemId];
    }
    
    TotalPrice = " <b>[ " + CurrentPrice + " ]</b>";
    SetLayerText("TotalPriceLabel", TotalPrice);
    // Update Default Item
    Default[CatId] = ItemId;
}

Open in new window

0
 

Author Closing Comment

by:Doomtomb
ID: 31406208
Simple fixes work the best!
0
 

Author Comment

by:Doomtomb
ID: 22702542
I tried your code, sijishJohn, but for some reason it didn't work :/ (onclick event, it didn't do anything). pkwan's worked though.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The Windows functions GetTickCount and timeGetTime retrieve the number of milliseconds since the system was started. However, the value is stored in a DWORD, which means that it wraps around to zero every 49.7 days. This article shows how to solve t…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

756 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