The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Sum 2 numbers, I am trying to sum 2 number fields within my HTML code.
tangmere.milli
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 4 2016, 08:17 AM
Post #2


.
********

Group: WDG Moderators
Posts: 7,702
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tangmere.milli
post Oct 4 2016, 08:38 AM
Post #3





Group: Members
Posts: 5
Joined: 4-October 16
Member No.: 24,869



QUOTE(Christian J @ Oct 4 2016, 02:17 PM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 5 2016, 10:23 AM
Post #4


.
********

Group: WDG Moderators
Posts: 7,702
Joined: 10-August 06
Member No.: 7



QUOTE(tangmere.milli @ Oct 4 2016, 03:38 PM) *

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?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 22nd October 2017 - 08:47 AM