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
913 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
  • 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

706 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

14 Experts available now in Live!

Get 1:1 Help Now