Sum 2 numbers, I am trying to sum 2 number fields within my HTML code. |
Sum 2 numbers, I am trying to sum 2 number fields within my HTML code. |
tangmere.milli |
Oct 4 2016, 08:09 AM
Post
#1
|
Group: Members Posts: 5 Joined: 4-October 16 Member No.: 24,869 |
Hi all,
I am very new to HTML website design, so apologies for the number of mistakes in this code. I am trying to sum 2 numbers within the code. 1 is a fixed number (price) and the other is input by the user. The code for this is below... CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>NewChocolateBox</title> <style> body { background-color: #000000; text-align:center; } #Q { width:146px; } </style> </head> <body text="white"> <p style="font-family:agency fb; font-size: 41px; position:absolute; top:205px;left:539px;"> Individual Chocolates</p> <p style="font-family:agency fb; font-size: 21px; position:absolute; top:432px;left:539px;"> Caramel Pot <br> Caramel mousse with <br> milk chocolate top </p> <p style="font-family:agency fb; font-size: 21px; position:absolute; top:504px;left:545px;"> Price Per Unit £</p> <p style="font-family:agency fb; font-size: 21px; position:absolute; top:504px;left:651px; type="number" name="price1" id="price1" >1.99</p> <a href="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\ChocBoxHome.htm"><center><img src="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\Images\ChocolateBoxLogo.jpg" alt="CBLogo" style="width:850px;height:180px;"></center></a> <a href="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\Products.htm"><img style= "position:absolute; top:185px;left:537px;width:210px;height:50px" src="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\Images\ProductsTab.jpg" alt="CBProducts"></a> <a href="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\Shop.htm"><img style= "position:absolute; top:185px;left:749px;width:210px;height:50px" src="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\Images\ShopTab.jpg" alt="CBShop"></a> <a href="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\AboutUs.htm"><img style= "position:absolute; top:185px;left:960px;width:210px;height:50px" src="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\Images\AboutUs.jpg" alt="CBAboutUs"></a> <a href="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\ContactUs.htm"><img style= "position:absolute; top:185px;left:1171px;width:210px;height:50px" src="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\Images\ContactUs.jpg" alt="CBContactUs"></a> <img style = "position:absolute; top:330px;left:539px;width:146px;height:115px" src="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\Images\ChocShop1.jpg" alt="Caramel Pot"> <form> <p style="font-family:agency fb; font-size: 21px; position:absolute; top:500px;left:539px;"> <br> Qty:<br> <input type="number" name="Qty1" id="Q"><br> <button onclick="buttonclick()"> Buy Now </button></p> <script> function buttonclick() { alert ("Payment Successful!"); } </script> </form> </body> <footer> <p style="font-family:agency fb; font-size: 18px; position:absolute; top:900px;left:539px;">Copyright © 2016 The Chocolate Box </p> <p style="font-family:agency fb; font-size: 18px; position:absolute; top:900px;left:1216px;">Designed by Stuart Millington </p> </footer> </html> I was to be able to sum the ID's "Q" and '"price1" and display it directly below the "Buy Now" button. Any help would be greatly appreciated. Regards, TM |
Christian J |
Oct 4 2016, 08:17 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
That can't be done with HTML alone. You need to use scripting, such as javascript or (better) a server-side script like PHP.
How is the actual ordering done? |
tangmere.milli |
Oct 4 2016, 08:38 AM
Post
#3
|
Group: Members Posts: 5 Joined: 4-October 16 Member No.: 24,869 |
That can't be done with HTML alone. You need to use scripting, such as javascript or (better) a server-side script like PHP. How is the actual ordering done? Many thanks for the reply. The ordering itself is irrelevant. This is just a sample of how screens will look etc. Would anyone be able to help with the javascript code to achieve this? Many thanks in advance, TM |
Christian J |
Oct 5 2016, 10:23 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
The ordering itself is irrelevant. This is just a sample of how screens will look etc. I was thinking maybe the calculation and ordering could be combined in the same script. QUOTE Would anyone be able to help with the javascript code to achieve this? When do you want the calculation to take place? When the user enters a number in the INPUT field, when clicking the Buy Now button, or some other way? |
Lo-Fi Version | Time is now: 29th March 2024 - 07:17 AM |