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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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 lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …

920 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