2

I want to create a price list for my graphics design website.

Basically, I have a base price of $150 for a website design, and I want to create a module where users can check optional boxes, to add to the price. Eg:

Price Starts from $150, which is in a total at the bottom of the page. The user can check an option upgrade costing something, I'll use $20 for the example. Once the box is checked, the total at the bottom of the page rises to $170.

I work with programming quite a lot, but not much JavaScript. I've never done anything like this before, and wish for it to all be client-side. Where should I start?

EDIT -

Here's some HTML of the basic page I have. Upon checking the checkbox, it's value should be added to the value of what is in the text area.

http://pastie.org/private/avwkmaqztfqxma5lg6y8q

Improve this question
1
  • It will be a lot easier to help if you provide some or your HTML. Commented Feb 9, 2013 at 21:17

2 Answers 2

Reset to default
1

The easiest way I can see to do this is:

  • Set your base price as a variable in JavaScript
  • Call a function when a checkbox is checked or unchecked
  • Add or subtract the value of the check box from the base price

I added two things to your example code. First, for each checkbox I added an onchange function we'll call update(). Second, I gave "Total" an id of total.

HTML:

Piecemaker - 
<input name="piecemaker" type="checkbox" value="20" onchange="update(this);">
<br>
Network Bar - 
<input name="netbar" type="checkbox" value="15" onchange="update(this);">
<br>
10 Tags - 
<input name="tags" type="checkbox" value="5" onchange="update(this);">
<br>
Shopping System - 
<input name="shop" type="checkbox" value="20" onchange="update(this);">
<br>
<br>
Total: <input id='total' name="total" type="text" value="$150" readonly>

The JavaScript is pretty straight forward. Set a base price (running_total), and either add or subtract the value of the checkbox from running_total.

JavaScript:

var running_total = 150;

function update(feature) {
    // Check
    if(feature.checked == true){
        // Add value to running_total
        running_total += parseInt(feature.value);
        document.getElementById('total').value = '$' + running_total;
    }
    // Uncheck
    if(feature.checked == false){
        // Subtract value from running_total
        running_total -= parseInt(feature.value);
        document.getElementById('total').value = '$' + running_total;
    }
}

Here's a link to a working example on jsfiddle.net: http://jsfiddle.net/dnA7q/1/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Perfect. Just what I was looking for. Thank you very much!
0

This is a very simpe problem (no offense). What I would do is put the price in the checkbox value

<input type=checkbox value=20 id=feature>

Then, when it is clicked, use this value to calculate the total:

document.gelElementById('feature').addEventListener('click', function () {
    document.getElementById('total') += this.value;
});

You'll have to do some minor string manipulation and use parseInt, but I'm sure you can figure this out.

Improve this answer

2 Comments

This didn't really help :/
@LegacyP7 what are you stuck on?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.