Calculating on an Orderform

@OziJan 28.2006

Hey all.

I really need your help here guys and girls.

BAsically, i am creating a simple 2 page orderform using html coding.

The orderform consists of pull down menus and checkboxes.

I want to use javascript to assign everything a value so that i can keep a running total and pass the final total to the next page.

for example, i want to assign every item in the pull down menus a value and asign a value for each checkbox and javascript hopefully should keep on updating the running total.

Then i want to send that value to the next page to be used in a payments and conformation page. I might want to pass the value to another page but i have no clue how to pass values.

I am a novice at this but i understand what i am trying to do with this

I am using editplus to do my html coding and i dont mind using frontpage to get it to create some code for me

Thanks and keep up the gr8 work

Ozi

to post a comment

JavaScript

9 Comments(s) _↴

@CytaelJan 29.2006 — #when you submit a form, all of its input fields get sent to the file specified in the action="" parameter of the <form> tag. How you deal with them from there depends on what resources (usually a server-side language like PHP) you have available

@phpnoviceJan 30.2006 — #i want to send that value to the next page to be used in a payments and conformation page. I might want to pass the value to another page but i have no clue how to pass values.[/QUOTE]
There are two ways to send data to the next page. The most reliable method is that mentioned above. The other method involves passing the data in the URL for the next page. This, of course, would expose your data in the browser's address bar -- if it has one. The first method supports only server-side code and, as mentioned, is 100% reliable. The second method supports both server-side code and JavaScript but looks less professional and is prone to failure if JavaScript happens to be disabled.

Want to know more?

Cheers.

@OziauthorFeb 09.2006 — #hello guys, for some reason i couldnt find my thread! lolz

ok i understand both methods. Are there any ample codes floating around on the web to help? i understand i have to pass to next page, but then how do i extract the relevant details on the next page. Also what if i wanted to hide some info on the next page but keep it so that it is passed all in one go on the 3rd page.

Let me break it down

Page 1 - Select product and any check boxes for add ons

Page 2 - Fill In address and payment details

Next step - submit order & all details are emailed to me and / or stored on a text file or whatever on the website.

I hope this helps u to help me ? lolz

@OziauthorFeb 09.2006 — #Oh by the way on page1 i want it to calculate the price and pass that as well as send the details of selections. It seems bloody complicated

@James_GatkaFeb 09.2006 — #Here's an "intermediate level" example. Hope you can work from it. You have a "bloody" long laundry list of "requirements", so maybe it would be good if you did some work on your own first before looking for more help, okay?

This is the first or main page:

[CODE]<html>
 <head>
 <script type="text/javascript">
 
 function updatePrice(nBtn){
 
 var nForm = document.forms['orderForm'];
 var tmp = 0;
 tmp = parseFloat(nForm.total.value) - parseFloat(nForm['prev'+nBtn.name].value);
 nForm.total.value = tmp.toFixed(2);
 tmp = parseFloat(nBtn.value) + parseFloat(nForm.total.value);
 nForm.total.value = tmp.toFixed(2);
 nForm['prev'+nBtn.name].value = nBtn.value;
 nForm['type'+nBtn.name].value = nBtn.id;
 
 }
 
 </script>
 </head>
 <body topmargin="0" leftmargin="0">
 <form name='orderForm' action='confirm.html' method='get'> 
 
 
 <p>&nbsp;</p>
 
 
 <p><font size="2" face="Arial"><b><font color="#666699">Power Your Optiplex 
 Desktop<br>
 </font></b></font>
 </p>
 <blockquote>
 <p><font face="Arial"><font size="2"><font color="#666666"><b>Processor</b></font><br>
 </font><font size="1">
 <input type='radio' name='Processor' value='524.00' id='Pentium D Processor 840' 
 
 onclick="updatePrice(this)"></font></font><font face="arial" size="1">Intel® 
 Pentium® D Processor 840 (3.2GHz,DC,2X1M,800MHz FSB)&nbsp;[add $524]</font><font size="1" 
 
 face="Arial">
 <br>
 
 <input type='radio' name='Processor' value='279.10' id=' Pentium D Processor 830' 
 
 onclick="updatePrice(this)"></font><font face="arial" size="1">Intel® 
 Pentium® D Processor 830 (3GHz,DC,2X1M,800MHz FSB)&nbsp;[add $279]</font>
 <br>
 
 <input type='radio' name='Processor' value='0.00' id='Pentium 4 Processor 630' 
 
 onclick="updatePrice(this)" checked></font><font face="arial" size="1">Intel® 
 Pentium® 4 Processor 630 with HT (3GHz, 2M, 800MHz FSB)
 
 <input type='hidden' name='prevProcessor' value='0' disabled>
 <input type='hidden' name='typeProcessor' value='Pentium 4 Processor 630'>
 
 
 </font></p>
 </blockquote>
 <p><font size="2" face="Arial"><b><font color="#666699">System Options<br>
 </font></b></font>
 </p>
 <blockquote>
 <p><b><font face="Arial" size="2" color="#666666">Operating System</font></b><br>
 <input type='radio' name='OS' value='0.00' id='Windows XP Home Edition' 
 
 onclick="updatePrice(this)" checked></font></font><font face="arial" size="1">Genuine 
 Windows® XP Home Edition,SP2, with Media&nbsp;[Included in Price]</font><font size="1" 
 
 face="Arial">
 <br>
 
 <input type='radio' name='OS' value='60.00' id='Windows XP Professional' 
 
 onclick="updatePrice(this)"></font></font><font face="arial" size="1">Genuine 
 Windows® XP Professional, SP2, with Media&nbsp;[add $60]</font><font size="1" face="Arial">
 <br>
 
 <input type='radio' name='OS' value='0.00' id='Windows XP Home Edition' 
 
 onclick="updatePrice(this)"></font></font><font face="arial" size="1">Genuine 
 Windows® XP Home Edition, SP2, without Media&nbsp;add $0</font><font size="1" face="Arial">
 <br>
 
 
 <input type='hidden' name='prevOS' value='0' disabled>
 <input type='hidden' name='typeOS' value='Windows XP Home Edition'>
 
 </font></p>
 
 
 
 <font size="2" color="#666666" face="Arial">System Total</font><font face="Arial" 
 
 color="#666699"><br>
 </font></span></b>&nbsp;$<input type='text' name='total' size='8' value='1238.00' readonly 
 
 style="padding: 0">
 <br><br>
 <input type='reset' value='Reset'> 
 <input type='submit' value="Submit"></p>
 </blockquote>
 </form> 
 </pre></font>
 
 </body>
 </html>[/CODE]

This is the next page, confirm.html

[CODE]<html>
 <head>
 <script type="text/javascript">
 
  function init(){
 
   var nForm = document.forms['confirmation'];
 
   var formInfo = location.search.substring(1,location.search.length).split('&');
 
   //alert(formInfo)
 
 
   var procPrice = formInfo[0].substring(formInfo[0].lastIndexOf('=')+1,formInfo[0].length);
   var procType = formInfo[1].substring(formInfo[1].lastIndexOf('=')+1,formInfo[1].length).replace(/+/g,' ');
 
 
   var osPrice = formInfo[2].substring(formInfo[2].lastIndexOf('=')+1,formInfo[2].length);
   var osType = formInfo[3].substring(formInfo[3].lastIndexOf('=')+1,formInfo[3].length).replace(/+/g,' ');
 
 
   var nTotal = formInfo[4].substring(formInfo[4].lastIndexOf('=')+1,formInfo[4].length);
 
 
   nForm.addProc.value = procPrice;
   nForm.nProcessor.value = procType;
 
   nForm.addOS.value = osPrice;
   nForm.nOS.value = osType;
 
 
   nForm.totalPrice.value = nTotal;
 
  }
 
  window.onload=init;
 
 </script>
 </head>
 <body>
 <h3 align='center'> Print this page for your records. </h3>
 <form name='confirmation'>
 Base Price: <input type='text' name='basePrice' size='10' value='1238.00' readonly><br>
 Processor: <input type='text' size='35' name='nProcessor' readonly><br>
 Add: $<input type='text' name='addProc' size='10' readonly><br>
 
 Operating System: <input type='text' size='35' name='nOS' readonly><br>
 Add: $<input type='text' name='addOS' size='10'readonly><br><br>
 
 Total: <input type='text' name='totalPrice' size='10' readonly>
 <!-- Put your PayPall button code here -->
 </form>
 
 </body>
 </html>[/CODE]

@OziauthorFeb 09.2006 — #lol i no. i dont wanna be spoonfed, but thanks for the coding. i will have a look at it and see if i can tinker with it. cheers bruv

@OziauthorFeb 09.2006 — #wow it works. thanks mate. i will play with the code and develop it further to work with checkboxes.

i dont mind the fact that its using the adress bar. as long as i know some starting point of how if passes information.

nice one mate ?

@James_GatkaFeb 09.2006 — #No problem, friend. (I'm not comfortable with that "mate" thing) ?

@OziauthorFeb 09.2006 — #lol err, sorry.

ok i changed radio to checkbox, but on unchecking the box, it doesnt remove the price. i tried ading "checked" in the line, but all that did was make the box default to selected.

im reading this: http://www.w3.org/TR/REC-html40/interact/forms.html

ill keep on tinkering, see wot i come up with

Also in #JavaScript _↴

array problem stopping a function Text Box to Textarea

Success!

Help @Ozi spread the word by sharing this article on Twitter...

Tweet This

Calculating on an Orderform

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Calculating on an Orderform

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴