Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2011
    Thanked 0 Times in 0 Posts

    Combining two or more text drop down boxes to calculate a price

    Hi all, I'm very new to Javascript and wonder if someone can help me.

    I'm creating an online enrolment form for my company, who are a training company. Users enrolling on the course must make three choices - The level of course, the size of course and whether they wish to attend a workshop or study by distance learning. The combination of these three factors will determine the price. I'd like to have the price automatically calculated using javascript and displayed on the form before they submit. Can anyone give me an idea of how to do this?

    There are three drop down boxes for users to select their course. They are: -

    Level of Qualification:
    Level 3
    Level 4
    Level 5
    Level 6

    Scale of Qualification:

    Preferred Delivery Method
    Distance Learning

    Each possible combination of these will affect the price. So for instance, if the user were to select 'Level 4', 'Certificate' and 'Workshop' the price would be calculated based on these three options.

    How can I calculate the ultimate price and then display it on the page (I was thinking of using innerHTML in a 'span' element to display the final value, but if anyone has any better ideas I'd be glad to hear them)

    The HTML code for the drop down boxes is below:

    <form action="enrolment.php" method="post">
    <select name="level" class="input" id="level">
      <option value="chooselevel"></option>
      <option value="Level 3">Level 3</option>
      <option value="Level 4">Level 4</option>
      <option value="Level 5">Level 5</option>
      <option value="Level 6">Level 6</option>
    <select name="size" class="input" id="size">
      <option value="choosesize"></option>
      <option value="Award">Award</option>
      <option value="Certificate">Certificate</option>
      <option value="Diploma">Diploma</option>
    <select name="delivery" class="input" id="deliv">
      <option value="deliverymethod"></option>
      <option value="Workshop">Workshop</option>
      <option value="Distance Learning">Distance Learning</option>
    Thanks all, hope someone here can help!



    *EDIT: I should mention that the form is also inside a table - Not sure if that will make a difference.
    Last edited by chrislondon; 12-13-2011 at 12:01 PM. Reason: Additional Information Given

  • #2
    New Coder
    Join Date
    Dec 2011
    Thanked 0 Times in 0 Posts
    Having worked on this a bit more, I think I've solved the first part of the puzzle - getting the browser to react to changes in the drop down boxes. Quite a long winded solution using nested 'if..else' statements, but it seems to be working well. At the moment I'm just using alert boxes to notify me that the browser is recognising the changes correctly.

    So now I just need to make it so that the price is displayed and changes dynamically in response to changes in the drop down boxes. Any ideas would be welcome, and if I figure it out myself I'll post the code up here for other people if they need it!

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Thanked 566 Times in 563 Posts
    I don't know how much yuor code has changed since you posted the original, but there are two things that you might find useful:

    - the value of your options can be different from the text, so you can put the price (or anything else) directly in there
    - each select box can have an onchange which will fire a function when a option is chosen. you can use this function to do your caluculations.

    so bearing those in mind, your select boxes may be more useful if they look something like this:

    <select name="level" class="input" id="level" onchange="calculate()">
      <option value="chooselevel"></option>
      <option value="20">Level 3</option>
      <option value="30">Level 4</option>
      <option value="40">Level 5</option>
      <option value="50">Level 6</option>
    hope that helps


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts