Looking simple checkbox value addition script

[jdebler]

Hello,

I am in looking for a very simple script, but not simple enough for me to know how to program. :)

Basically, I have an HTML page with long list of items, each with a specific dollar amount, I need to make it so that there is a checkbox by each item, and when someone comes to the page and selects items, it adds up the dollar amount for all items checked and displays that amount at the bottom of the page.

Something like this is what I am looking for:
http://javascript.internet.com/calculators/checkbox-calculator.html

The only problem in me using that one is I will have to change dollar values and items on the page often, and using that one does not allow changes like that very easily. Plus I will have about 8 different pages of items.

Does anyone know of a script like what I am looking for or can at least help me out with this? I am a javascript newbie. :o

Any help is a ppreciated!
Jason

[AdamBrill]

Do all of the items equal the same amount? Or are they all different? If they are all the same, you could run a do...while loop to make them all and then another one to add them up. Otherwise, the best you can do is make an array of all the prices, which wouldn't be that much better than the other way. You would have a whole bunch of lines that would look like this:
Price[0]="10.00";
Price[1]="32.75";
Price[2]="12.50";
Price[3]="20.00";
Price[4]="15.00";

and so on. It wouldn't be that hard to do it, but it also wouldn't be that much easier to modify.

[jdebler]

Originally posted by AdamBrill
Do all of the items equal the same amount? Or are they all different?

Nope, all items have different amounts.

Looks like this is going to be harder than I thought it would be.:o I have no idea even how to get started in programming this one, and I am under the gun! :o

Jason

[AdamBrill]

Well... What you really need is a database. I don't know if you know PHP at all, but that would be the best thing to use in this situation. Beside that, the array method would be your best bet. How many items are there?

[jdebler]

Originally posted by AdamBrill
Well... What you really need is a database. I don't know if you know PHP at all, but that would be the best thing to use in this situation.

Hoo boy...it gets deeper! :p

Beside that, the array method would be your best bet. How many items are there?

8 sets of items, with around a maximum of 20 items in each set.

Thanks for the help!
Jason

[AdamBrill]

Originally posted by jdebler
Hoo boy...it gets deeper!
LOL Let me guess... You don't want to try that?? :)

With that many items, I would just use a couple of arrays. It shouldn't be too hard to modify that way... Would each page just have one of the arrays? Like page one has array1, page two has array2, etc.? or would all of the pages have all of the arrays? Let me know and I'll slap some code together for you to start with...

[jdebler]

Originally posted by AdamBrill
LOL Let me guess... You don't want to try that?? :)

Well, I am more of a designer than a programmer. I hate to say it, but I have so much to learn in both departments. :(

With that many items, I would just use a couple of arrays. It shouldn't be too hard to modify that way... Would each page just have one of the arrays? Like page one has array1, page two has array2, etc.? or would all of the pages have all of the arrays? Let me know and I'll slap some code together for you to start with...

I guess I should have outlined this before. :)

Let's say I work for a company that offers aftermarket performance packages for cars. ;)

We have packages for 8 entirely different cars. Each car has 4 MAIN packages (Performance Upgrade Package 1, Performance Upgrade Package 2, etc...) and then a series of additional "a la carte" items (custom floor mats, wheels, accessories, etc...) they can add to it. The packages/items available for each car is different.

I need to make a page for each car with a list of packages and the optional items. By each package and item, there will be a checkbox. There will also be a price total at the bottom of the page. In this case, the packages will technically not be treated any differently than the optional items, the packages are technically just another item in the list.

The idea is a simple "build your own" type of page where people can select the package they want for one of the cars, and also select the additional optional items they may want and have a running total of how much it will cost them at the bottom of the page. Then, once they have a price in mind for the package and options they have slected, they print the page off and take it to their local dealership to sit down with the salesperson who then ordes the package for them.

On occasion, the prices will change a little bit or an optional item will be added or removed.

It is simple in concept, but I am surprised at how much there is involved.

Your help in this is very much appreciated. If you need additional info, just let me know!

Jason

[jdebler]

Any thoughts? I am still stuck. :(:o

[AdamBrill]

Sorry it took me a while to get back to you... I was out of town. But, here is some code for you to look at:
<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language="javascript" type="text/javascript">
package = new Array("Package 1","12.50",
"Package 2","12",
"Package 3","13",
"Package 4","14",
"Package 5","15",
"Package 6","16",
"Package 7","17",
"Package 8","18");

extra = new Array("Extra 1","1",
"Extra 2","2",
"Extra 3","3",
"Extra 4","4",
"Extra 5","5",
"Extra 6","6",
"Extra 7","7",
"Extra 8","8");

document.write('<div>');
x=0;
y=0;
document.write('<form name=form1>');
do
{
document.write(package[x]+'<input onclick="make2(this,this.form)" type="checkbox" name="package'+y+'" value="'+package[x+1]+'">');
document.write('<br>');
x+=2;
y++;
} while(package[x])
document.write('</div>');
document.write('<div>');
x=0;
y=0;
do
{
document.write(extra[x]+'<input onclick="make2(this,this.form)" type="checkbox" name="extra'+y+'" value="'+extra[x+1]+'">');
document.write('<br>');
x+=2;
y++;
} while(extra[x])
document.write('</div>');
document.write('Total: <input type=text name=total>');
document.write('</form');

function make2(element,formname)
{
x=0;
total=0;
do
{
if(eval("formname.package"+x+".checked")==true)
{
total+=Number(eval("formname.package"+x+".value"));
}
x++;
} while(eval("formname.package"+x))
x=0;
do
{
if(eval("formname.extra"+x+".checked")==true)
{
total+=Number(eval("formname.extra"+x+".value"));
}
x++;
} while(eval("formname.extra"+x))
formname.total.value=total;
}
</script>
</head>

<body>
</body>

</html>
Now to explain how it works. :) In these lines:

package = new Array("Package 1","12.50",
"Package 2","12",
"Package 3","13",
"Package 4","14",
"Package 5","15",
"Package 6","16",
"Package 7","17",
"Package 8","18");

The first part is the Package name, the second part is the price. You can delete some out, add more, or whatever. Obviously, the extra one works the same way. When you click one of the choices, it adds up the price and puts it in the text field at the bottom. Let me know if you have any questions...

[jdebler]

Wow....very cool...

Thanks!

Now for my questions (you knew there would be some, I am sure).

How do I format the form to match the rest of the site that I am working on? I'd like to present it in a nice neat table using font styles, table background colors, etc...

Also, I have to change the names of the packages and options (the packages all have special names, as well as each additional option). For example, sometimes the packages are called "Stage I, Stage 2, Stage 3, etc... or "Level I, Level 2, Level 3, etc... and the optional items can be called "Chrome Wheels", "Performance Handling Set", "Brake Upgrade Package" etc...

Changing the package name is no problem as I just changed every instance of the word "Package" to "Stage" and that worked fine, however looking at the code I don't think I can do the same with the additional options because each option name is entirely different each time.

I apologize for not making this clear in the first place.

Do you happen to be a car enthusiast or do you have a PayPal account? I'd like to send you something for your time and effort.

Jason

[AdamBrill]

Ok, try the attached code. I put all of the data into tables. You can modify it to look like what you wanted it to look like.

Originally posted by jdebler
Also, I have to change the names of the packages and options (the packages all have special names, as well as each additional option). For example, sometimes the packages are called "Stage I, Stage 2, Stage 3, etc... or "Level I, Level 2, Level 3, etc... and the optional items can be called "Chrome Wheels", "Performance Handling Set", "Brake Upgrade Package" etc...

Changing the package name is no problem as I just changed every instance of the word "Package" to "Stage" and that worked fine, however looking at the code I don't think I can do the same with the additional options because each option name is entirely different each time.

hmm... I'm not sure I know what you mean. Do you mean that each package has it's own 8 options? So, the options should change when they select the package? If so, are they only allowed to check one package?

Originally posted by jdebler
Do you happen to be a car enthusiast or do you have a PayPal account? I'd like to send you something for your time and effort.
How about a turbo charger for a '98 Mustang? ;) Otherwise, my paypal address is adambrill1986@hotmail.com

[jdebler]

Originally posted by AdamBrill
Ok, try the attached code. I put all of the data into tables. You can modify it to look like what you wanted it to look like.

Awesome! Thanks for spelling things out. Like I said, I am a javascript newbie. Times like this really suck for me. :)

hmm... I'm not sure I know what you mean. Do you mean that each package has it's own 8 options? So, the options should change when they select the package? If so, are they only allowed to check one package?

Whoops...no, nothing that complicated. I am just saying that instead of:

extra = new Array("Extra 1","1",
"Extra 2","2",
"Extra 3","3",
"Extra 4","4",
"Extra 5","5",
"Extra 6","6",
"Extra 7","7",
"Extra 8","8");


I would have to do something that looks like:

extra = new Array("Extra 1","1",
"Performance Handling Package","999",
"Chrome Wheels","749",
"Blinker Light Fluid","49",
"Piston Return Springs","189",
"Kenuter Valve","69",


Hoever, from the looks of it your code isn't that flexible. Feel free to slap me and tell me I am a newbie if I am incorrect.

How about a turbo charger for a '98 Mustang? ;)

You are a Ford guy? I wonder if we don't know of each other outside of this board. Ever been to CamaroZ28.Com? A lot of Ford guys mill in and out of there to see what the competition has going on.

Anyway...I can't help you out with the turbo, however I can at least point you in the right direction. If you don't know about it already they are making some serious turbo kits over at Turbolocity.Com. We have been trying to help them get the operation promoted a little better (they make Mustang and F-Body kits). Check them out if you haven't already and tell them that a lowly Camaro guy sent you. ;);)

Otherwise, my paypal address is adambrill1986@hotmail.com

I'll at least fire a few bucks your way for your help. It is much appreciated.

Jason

[AdamBrill]

Originally posted by jdebler
Awesome! Thanks for spelling things out. Like I said, I am a javascript newbie. Times like this really suck for me.
No Problem. :)

About the Extra part, it should work fine if you change it to what you had. The data I had in there was just to fill up space. ;) So, just change that to whatever you want it to be. The only thing about your code is this. You have this:
extra = new Array("Extra 1","1",
"Performance Handling Package","999",
"Chrome Wheels","749",
"Blinker Light Fluid","49",
"Piston Return Springs","189",
"Kenuter Valve","69",
It should be:
extra = new Array("Extra 1","1",
"Performance Handling Package","999",
"Chrome Wheels","749",
"Blinker Light Fluid","49",
"Piston Return Springs","189",
"Kenuter Valve","69");Notice the ending.

No, I haven't ever been to camaroZ28.com. Maybe I should go check it out. ;) I'll check out Turbolocity.Com, too.
Originally posted by jdebler
I'll at least fire a few bucks your way for your help. It is much appreciated.
Thanks. It helps to know that I am appreciated. :D

[jdebler]

Attached is an example of how I need the page to be visually...

I don't mean to be vague and keep addiing details to this. It is hard for me to explain something when I ...uh... don't know what I am talking about. :):):o

Anyway....maybe the attached file will help clarify things. It is a sample of what a page for one of the 8 cars needs to look like.

[AdamBrill]

Take a look at the attached code and let me know what you think...