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
925 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

It is a general practice to get rid of old user profiles on a computer  in a LAN environment. As I have been working with a company in a LAN environment where users move from one place to some other place at times. This will make many user profil…
Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
The viewer will learn how to count occurrences of each item in an array.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

728 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