This is about my web page:
www.ryanscustomcomputers.f2g.net

I want to make a configuration order page. I want it so that a visitor can select each component of there computer and then be presented with a final sumemr and price, I figure I could jsut do that with drop down boxes. That is the easy part.

The thing is I need the options for each drop down box to be based on the item the visitor picked in the box beofr it. For example, if they select a intel motherboard, in the next box they can only selct intel processors and not AMD(which wouldn't work.

Also, when the visitor selects an item, I want a small picture/description beside it whic hwould need to change as the users selection changes.

I have no money for professional help, so I have to do this all. My web host supports CGI but I have no idea how to use it. Any help woudl be great!

PS: Instead of using drop down combo boxes i could use radio buttons but there is still the problem of greying out incompatible selections.

-Ryan Adams
Ryan's
Custom Computers

You need to create a CGI script that generate dynamic menu options.

Danny

i that's what i was thinking. Is there a free one avalible that I could just modify to fit my needs? I don't know how to write CGI scripts but I know I could modify one. Or is there an eisier way?

-Ryan Adams
Ryan's
Custom Computers

try hotscripts.com
you could also do it in java, also look at abspc.com and ibuypower.com s configurators...

http://excellhosting.net for all your hosting needs.

I think this is an interesting problem...I'd be interested to hear other people's approaches to this.

I'm thinking totally javascript solution...You could use server-side scripting but I think you would lose some robustness of the code.

Here is my approach:

Conceptually speaking, you need to partition each item into a "compatibility group", each with a unique number. For example, each item that goes exclusively with a P4 motherboard can have a "compatibility number" (CN) starting with a 1, each part that goes with AMD has a # starting with 2. Those parts that can go with either start with some "don't care" character (I'll use _)

So as soon as they choose P4, you need to filter out all the parts whose CN does not start with 1. So on and so forth for each part. For example, consider the format of a compatibility number
abcd
where a=P4/Athlon (1 for p4, 2 for AMD)
b=AGP Slot on MB (1 for yes, 2 for no)
c=DVI port on Video card (1 for yes, 2 for no)
d=onboard LAN (1 for yes, 2 for no)

Then the CN for a 56K Modem would probably be ____, meaning that you can choose a modem no matter what else you choose.

CN for a DVI only Flatscreen would be __1_, meaning you can only get the DVI flatscreen if you've selected a video card with DVI, or haven't selected a video card at all yet.

So say you've chosen a P4 system with an AGP slot, no LAN, and no DVI. Then your system's CN would be:
1122

You can then loop through each option in the form and remove all of those items whose CN is not compatible (ie does not have the specified digit or a "don't care" character.) This could be done with a regular expression: ([1_][1_][2_][2_])

You would probably have the CN be the first few digits of the value of each OPTION tag.

I know this looks tough...I don't know if you will find a script that does what you want, but it would be fun to build one.

Again, I'm interested to see what creative algorithms the folks from the programming forum come up with.

-SN

I don't know any programing except BASIC and my understanding of that is, well, basic. I might have to do it in all html. If anyone could write a script or knows of one that I could modify let me know. Thanks.

-Ryan Adams
Ryan's
Custom Computers

SN is so totally right. This is a pure javascript-thingy! I'll look at the problem more closely tomorrow and will come up with a script.

Ok. That would be great. Befor you get to involved please e-mail me at cooldude10810@yahoo.com and I'll work with you on it. Thanks.

PS: Liek I said I don't really have any money but if you can make a good script I'll give you a huge discount on a PC or upgrade parts.

-Ryan Adams
Ryan's
Custom Computers

Don't forget to post the script here...I'm sure it would be helpful to many people. If you decide not to do it, post back and I might give it a go if I have time.

-SN

If you want to do it right, you'll need to use a combination of JavaScript, CGI, and some form of a database (such as MySQL).

BTW, you still need to get rid of the pressboard example. That alone would turn away most of your (serious) customers.

Ryan --> check your mail. I have sent you an example.

For all other people:
I have writte a small script:
var DefaultPrice = 1200
function CalculateNewPrice(entry)
{
var NewPrice = DefaultPrice
for (var i=0; i < document.orderform.length; i++)
{
NewPrice += parseInt(document.orderform.elements[i].value)
}
NewPrice = "$ " + NewPrice
document.resultform.price.value = NewPrice
}

The form is build with these elements:
<select size="1" name="OS2" onChange="CalculateNewPrice(this)">
<option value=0 selected>None (Default)</option>
<option value=60>Fedora Core 2 Linux (+$60)</option>
<option value=70>Other - Specify in comments (+$70)</option>
</select>

Each time a different option is selected, the function CalculateNewPrice() loops through the order-form and adds the values of the selected options to the default price. It outputs the new price to an inputbox in another form. Not the same form, otherwise the loop will be affected.
Hope this helps.

Just a couple of comments on Khalid's script...First, it needs a small adjustment to work properly...If you have a "submit" button or any other form element that doesn't have a numerical value, it will throw an error.

Second, it doesn't do the interesting part of the problem...The compatability stuff.

I wrote a similar script for jimi that is pretty much the same concept.

If I were doing this for my own site, I would go with fishMonger's suggestion and use a combination of PHP, mySQL, and Javascript. But that's too much work for a freebie over the internet. If it's important to you, Ryan, then you may want to pick up a couple of books on web programming and play around with it.

I'll play around with the javascript part and post back if I come up with anything useful.

-SN

---quote---
"If you have a "submit" button or any other form element that doesn't have a numerical value, it will throw an error."
---/quote---

True. But we can check to see if document.orderform.element[i].type == "select-one" .

---quote---
"Second, it doesn't do the interesting part of the problem...The compatability stuff."
---/quote---

I am quite new in programming in javascript, php and mysql. I hope I can learn from your comments if you can clearify what you mean. What part of the code is not compatible with what? You think not all browsers will accept this code? Please let me know :-)

i no longer need the "compatibilty function" your talking about. Take a look at my site at ryanscustomcomputers.f2g.net and click on "order". That is my newest order forms. The price addign code isn't there yet though.

-Ryan Adams
Ryan's
Custom Computers

Khalid-
No, You're code is good. I meant that it doesn't address the interesting part of the problem, being that some parts are incompatible with other parts, and so when you pick, for example, a P4 processor, you should not be allowed to pick an AMD motherboard.

Checking the type, as you suggested, would fix your problem.

Your code is pretty cross-browser compatible. Older versions of Netscape prefer you use document.getElementById("orderform") rather than address it by document.orderform, but that's a pretty minor issue.

It's also worth noting that you're code only works for integer values. Consider using parseFloat rather than parse Int, and rounding.

Ryan-
Order form looks good. I may still do a javascript for my own entertainment, but I won't rush it since you don't need it.

I assume you know about the spelling errors in the order form...Many of them are the same ones I mentioned in the last post.

-SN

yeah. Thnaks. The web site is about 90% done. All the content and stuff is there, I jsut need to spell check, grammer check, and check all my info for accuracy. What do you think about the current pacakges and set up? Do the computers look good? Is it easy to use?

-Ryan Adams
Ryan's
Custom Computers