Radio Buttons Add to Price on Product Customization

Confusing title, I know.

[Gurboura]

Hello and thank you to anyone willing to help me or point me in the direction.

I'm starting a computer business and would like to add a script to my website that would allow customers to custom build their computers piece by piece. Having Radio Buttons to select choices for hard drives, monitors, ect. and display the price and update it instantly.

So say, they want a 1TB Hard-Drive instead of the 500GB one, they can click the radio button for the 1TB HardDrive and it'll change the price instantly.

How would I go about doing this?

[coopster]

Welcome to WebmasterWorld, Gurboura.

I think it would be easiest if you would keep component options and their values stored as well as the actual selected options. Each time there is a change, update the total.

[Gurboura]

Thank you Coopster :)

So, your saying, store them in a Database or such, and pull the data from that?

How would I update the total price instantly? How would I get the prices to be added together. Sorry if I'm not making sense, I'm trying to explain it as best as I could. Maybe if I show an example it'll help give an idea of what I'm trying to do.

[configure.us.dell.com...]

[coopster]

I haven't had time to review DELL's processing but I did indeed understand your goal. By the way, you can always view the source and see how they are handling it ;)

[Gurboura]

I tried that, and I can't seem to find their Javascript, and I tried looking at Alienwares, but their price was 17847 and it displayed as 69.99 or something similar so it really confused me lol

[coopster]

You will have radio buttons that your user is going to select. And/or you may also have checkbox options or select drop-down lists. So you could either add/subtract from your total price when the radio button (or other form element) is changed or your could just total the price up from all the radio buttons on the screen (if the entire group of options for the whole configuration was in one form). You will be using the corresponding event handler for each form element that can be altered to trigger the price update.

[Gurboura]

That's my issue, I don't know how I would go about getting the radio buttons to update price and giving them a price.

[coopster]

Giving them a price? You set that in your HTML code:

<input name="memory" type="button" value="25">1GB<br> 
<input name="memory" type="button" value="50">2GB<br> 
<input name="memory" type="button" value="75">3GB<br>

Then you can set an event handler for them in your JavaScript to perform action based on the "onclick" event handler.

[rocknbil]

Two cents, before you get started . . . . keep Javascript out of your head for a while. Get your server-side programming working. That is, they make a selection, hit next, you store the selections in your DB, then unless you have a value for "I'm done" return to the build page, linking to their order by a cookie (preferred). At the very least, return the page with those values in hidden fields. You'll encounter LOTS of errors and things you didn't think of. Work those all out.

Once it's done, NOW take what you've learned and build your javascript to do it all on one page.

Three advantages:
- Your site will work with and without Javascript. This is a Really Big Deal.

- Your site will have no "holes" if Javascript is disabled, you won't get orders for a $50 computer because JS didn't do the calculation for you.

- When it's all working, all you need to do is duplicate the server-side functions in JS, it will make programming the JS much easier - and - you will already KNOW what values you'll need to store in the page, and have the server-side scripting in place to make it happen. Example, someone pulls up X brand of motherboard, you query the DB for all the options for brand X, store those in the JS so you don't need to hard code everything.

I've found it much harder to debug something that started with JS and added the backend than the other way around.