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

[Webinar] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

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

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 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…
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

739 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