Skip to main content
Participating Frequently
November 25, 2008
Question

Dynamically updating a value based on drop down menus

  • November 25, 2008
  • 2 replies
  • 604 views
Hi,

I am trying to make a website for a new computer company. Part of the website allows you to choose different componets, like the Dell website. It has different drop downs like CPU, Case, motherboard etc which list the option we have chosen then it gets all of the records from each database. So for CPU it checks to see what motherboard is selected and displays all of the CPUs that are compatible with that bpard from the CPU data base.

It has the price at the bottom of the page which is calculated by adding all the prices of the drop down menus together but if I change an option it doesn't change the price.

How can I have the price dynamically change based on different values being selected from the drop down boxes?

Thanks for any help

Lewis
    This topic has been closed for replies.

    2 replies

    November 26, 2008
    You'd do some kind of onChange with the select. Get the value of the current index in the select and pass that over to whatever needs it.

    Using a JavaScript framework may be best and easiest - like jQuery. It allows you to do stuff like this quite easily. Though I'm no expert either - just getting into it.

    Are these chained selects then? I also think there's a CF only version / custom tag out there for this - but it would require a page refresh everytime the list is changed.

    You could also use AJAX I guess.

    Cheers,
    Mikey.
    lewiscobAuthor
    Participating Frequently
    November 26, 2008
    All of the drop downs are independant. So if a user chooses a different motherboard it can update the price and then if they choose a different processor it updates again etc.. just like Dell use for their PC configurator.
    Inspiring
    November 26, 2008
    Hi,

    Then you need put up a generic javascript function to add-up qty/price, and call the same in onBlur event of every textbox.

    You can display the price using a <span> tag simply like,

    span1.innerHTML="total_amt"



    Inspiring
    November 25, 2008
    Assuming you have an html form, you use javascript.

    Hopefully your dropdowns are query based. Include the price in this query. Then you can bring the values into js as an array and take it from there.
    lewiscobAuthor
    Participating Frequently
    November 25, 2008
    It is just a standard HTML form. The drop downs are populated by various queries and the price is included. I have very little JS knowledge, how would I go about adding the prices to an array and have the price auto update?