By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,369 Members | 1,207 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,369 IT Pros & Developers. It's quick & easy.

Generating a Total Price in a Form

P: 3
I am pretty new at doing web development. I can make simple pages, but recently received a request from a small limo business I do web development for.
We are currently working on a reservation form online for customers to fill out personal info, event details, and payment options. In the form we ask the customer to select what limo they want in addition to how many hours they want the limo for.
The problem I am running into is getting a total price to generate based on these two fields that the customer selects.

The limo type field is a drop down list:
Expand|Select|Wrap|Line Numbers
  1. <select name="Car">
  2.      <option value="None Selected">-----</option>
  3.      <option value="2007 Wave Limo">2007 Wave Limo</option>
  4.      <option value="Standard Wave Limo">Wave Limo</option>
  5.      <option value="Escalade Limo">Escalade Limo</option>
  6.      <option value="Sedan-Black">Sedan - Black</option>
  7.      <option value="Sedan White">Sedan - White</option>
  8. </select>
The Hours field is a drop down list as well.
Expand|Select|Wrap|Line Numbers
  1. <select name="Hours">
  2.      <option value="3">3 Hours (minimum)</option>
  3.      <option value="4">4 Hours</option>
  4.      <option value="5">5 Hours</option>
  5.      <option value="6">6 Hours</option>
  6. </select>
What we thought we could do was use a javascript code to designate a Rate variable based on the limo type the customer chose, something like:

Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript" type="text/javascript">
  2. if (document.form1.elements[0].Car=='2007 Wave Limo'){
  3.     Rate='70';}
  4. else if (document.form1.elements[0].Car=='Standard Wave Limo'){
  5.     Rate='50';}
etc...

We then wanted to multiply the Rate variable to the Hours variable and display the total price to the users. We just don't know how to write the code to do it.
We got as far as attempting to do a document.write statement to attempt this.

Expand|Select|Wrap|Line Numbers
  1. document.form1.elements[0].Cost=(Rate*document.form1.Hours)
  2.  
  3. document.write(Cost);
We are currently hosted by GoDaddy on a Linux based platform and do not have a database connected to the site at all. All the variables we are attempting to use online and we are not 100% sure if this can even be done.

If anyone can see what we might be doing wrong or has a better way to accomplish this it would be greatly appretiated!

Thank you!
Mar 13 '07 #1
Share this Question
Share on Google+
4 Replies


P: 27
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.   <head>
  3.     <script type="text/javascript">
  4.     window.onload=setTotal;
  5.     function setTotal(){
  6.         var price  = window.document.getElementById('price').value;
  7.         var time   = window.document.getElementById('time').value;
  8.         var result = window.document.getElementById('total'); 
  9.  
  10.         result.value = price * time;
  11.     }
  12.     </script>
  13.   </head>
  14.   <body>
  15.     <select id="price" onchange="setTotal();">
  16.       <option value="10.50">Some Limo</option>
  17.       <option value="15.50">Other Limo</option>
  18.       <option value="11.50">Yet another limo</option>
  19.     </select>
  20.     <br />
  21.     <select id="time" onchange="setTotal();">
  22.       <option value="1">1 hour</option>
  23.       <option value="2">2 hours</option>
  24.       <option value="3">3 hours</option>
  25.     </select>
  26.     <br />
  27.     <input id="total" type="text" />
  28.   </body>
  29. </html>
  30.  
simiplified, of course, hope that gets you on your way.
Mar 13 '07 #2

P: 3
Thank you this worked like a charm!

One other question, is there a way to turn that total text field into a non-editable field?

We tested changing the generated 'total' value in the form and it keeps the value we changed it to.

For example, if the user selects Limo 1 for 3 Hours and the total field generates $200.00, the user can delete the $200.00 value and type in $30.00, which will be submitted in the form instead of the $200.00 it should be.

We were going down the lines of turning the 'total' text field into a hidden field, and then using a document.write script to display the value on the screen so the customer cannot change the value.

I'm probably totally off, but this is what I have:
Expand|Select|Wrap|Line Numbers
  1. <input type="hidden" name="total"><br>
  2. document.write(window.document.getElementById('total');)
If you know of a better way to do this, please let me know. Thank you!
Mar 20 '07 #3

chunk1978
100+
P: 224
hi there... all you have to do is make the text field readonly:

Expand|Select|Wrap|Line Numbers
  1. <input type="text" name="total" readonly>
  2.  
you could also make it disabled like this:

Expand|Select|Wrap|Line Numbers
  1. <input type="text" name="total" disabled="disabled">
  2.  
the disabled function reduces the text's opacity or make the text field grayed-out (depending on what browser you're using)... i would suggest using the readonly function... this is purely an HTML issue as no javascript is required for your text fields to be readonly...

note also, that the disabled function on select menu options only works in firefox (it's not cross-platform), so you shouldn't use the disabled function with select menus.
Mar 21 '07 #4

P: 3
Wow, I didn't know about that readonly function.

Thanks everyone who helped!
Mar 21 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.