The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
 Reply to this topicStart new topic
> Webpage Percent Calculator
M4rshall
post Apr 1 2014, 03:42 AM
Post #1


Member
***

Group: Members
Posts: 60
Joined: 8-August 13
Member No.: 19,534
Hi,

I am trying to create a webpage that will calculate a discount that can be applied for customers. I current have an excel document on the website that our agents can download and workout the discount. The problem is that the agents don't like, don't know how or just plain lazy to use this. What I want to be able to do is have a webpage where they can input the quote and then discount rates will calculate for them making it even easier.....

Example -

Quote £1000

Calculate - Button,

5% off - result
10% off - result
15% off - result
20% off - result
25% off - result
30% off - result
35% off - result
40% off - result
45% off - result
50% off - result
60% off - result
65% off - result
70% off - result

Anybody any ideas with this one? I've not got a clue where to start.....

I'd really appropriate any help with this
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 1 2014, 09:13 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,663
Joined: 10-August 06
Member No.: 7
You need scripting for that. Serverside (e.g. PHP) is more reliable but requires loading a new page, clientside javascript can run on the same page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
M4rshall
post Apr 1 2014, 10:07 AM
Post #3


Member
***

Group: Members
Posts: 60
Joined: 8-August 13
Member No.: 19,534
PHP isn't possible at the moment but have the server team looking in to that but it is a case of how long is a piece of string. JavaScript I'm not particularly knowledgeable on and by that I have no clue, can you offer any pointers or assistance.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Apr 1 2014, 11:34 AM
Post #4


This is My Life
*******

Group: Members
Posts: 1,128
Joined: 24-August 06
From: t-dot
Member No.: 16
At it's most basic, collect the input in a form and then pass it to a javascript function to calculate. Here is a very rough and simple idea, you would probably need to validate the input to ensure they are numbers, and maybe a drop down for the percent is what you want . . .
CODE

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
</head>
<body>


<form name="myform" action="" method="get">
Input Price<input type="text" name="input_amount" />
Discount %<input type="text" name="discount_amount" />
<input type="submit" value="Calculate Discount"   onclick="calculateDiscount();">
</form>




<script type="text/javascript">
function calculateDiscount(){
    var amount  = document.myform.input_amount.value;
    var discount= document.myform.discount_amount.value;
    var result =  amount - (( amount * discount ) / 100);
    alert("Your Discounted Total is $" + result);
}
</script>


</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 1 2014, 04:08 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,663
Joined: 10-August 06
Member No.: 7
Note that if you use a complete HTML form with javascript you need to add a "return false" in the event:

CODE
<input type="submit" value="Calculate Discount" onclick="calculateDiscount(); return false;">

to stop the form from submitting.

QUOTE
you would probably need to validate the input to ensure they are numbers

You might use HTML5 number input fields:

CODE
Input Price<input type="number" name="input_amount" />
Discount %<input type="number" step="5" min="5" max="70" name="discount_amount" />

--browser support is still limited but they should degrade gracefully to traditional textfields. See
http://www.w3.org/TR/html5/forms.html#numb...e-(type=number)
http://caniuse.com/#feat=input-number

In the actual script you might test the user data with regular expressions (0-9 and decimal points). Seems you can't use isNaN() or typeof to check the type of the form field values, since they're always considered "string" regardless what the user entered. Then if you change their type to "number" by multiplying: http://www.quirksmode.org/js/strings.html#stringnum even a value with letters might be considered a "number" (algebra?). wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Apr 1 2014, 04:33 PM
Post #6


This is My Life
*******

Group: Members
Posts: 1,128
Joined: 24-August 06
From: t-dot
Member No.: 16
QUOTE(Christian J @ Apr 1 2014, 05:08 PM) *

QUOTE
you would probably need to validate the input to ensure they are numbers

You might use HTML5 number input fields:


Those number inputs are cute, but they don't ensure a number, you can still type a string into the box.
It just gives you an arrow widget to let you scroll in a number, but if you're trying to get to a thousand you might get tired.

QUOTE
In the actual script you might test the user data with regular expressions (0-9 and decimal points). Seems you can't use isNaN() or typeof to check the type of the form field values, since they're always considered "string" regardless what the user entered. Then if you change their type to "number" by multiplying: http://www.quirksmode.org/js/strings.html#stringnum even a value with letters might be considered a "number" (algebra?). wacko.gif

Couldn't you validate by using parseFloat() on the input, and then if it is NaN output an error?

This post has been edited by jimlongo: Apr 1 2014, 04:36 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 1 2014, 06:20 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,663
Joined: 10-August 06
Member No.: 7
QUOTE(jimlongo @ Apr 1 2014, 11:33 PM) *

Those number inputs are cute, but they don't ensure a number, you can still type a string into the box.

My Chrome Iron browser does display an error message when you attempt to submit the form. In Firefox it seems you must also add the PATTERN attribute to enforce digits, something like:

CODE
<input type="number" pattern="\d{1,}" name="input_amount" />

(which shouldn't be necessary, according my reading of the spec). Haven't tested latest IE.

Note that this HTML5 form validation only affects a real form submission attempt. To use it together with javascript, try an onsubmit event:

CODE
<form name="myform" onsubmit="calculateDiscount(); return false;">

instead of the onclick in the submit button.

(Nitpick: in HTML5 the ACTION value must not be empty, instead you can remove it altogether.)

QUOTE
It just gives you an arrow widget to let you scroll in a number, but if you're trying to get to a thousand you might get tired.

True, the arrows are unnecessary (even though you can type as well). Perhaps a "text" INPUT combined with PATTERN could work just as well. For the percent field, perhaps the "range" INPUT might work.

QUOTE
Couldn't you validate by using parseFloat() on the input, and then if it is NaN output an error?

Yes that seems to work, at least after after multiplication:

CODE

alert(parseFloat(1*'1.5')); // 1.5
alert(parseFloat(1*'1foo2')); // NaN
alert(parseFloat(1*'1foo')); // NaN
alert(parseFloat(1*'foo2')); // NaN

But before multiplication it doesn't seem to work if there are letters between numbers, then it just returns the number before the letters while ignoring the number after:

CODE
alert(parseFloat('1foo')); // 1
alert(parseFloat('foo2')); // NaN
alert(parseFloat('1foo2')); // 1
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
M4rshall
post Apr 2 2014, 03:35 AM
Post #8


Member
***

Group: Members
Posts: 60
Joined: 8-August 13
Member No.: 19,534
Is there a way where I can have the result display as a result on the page rather than a pop up???

Thanks for your help so far dudes, I do appreciate it.

This post has been edited by M4rshall: Apr 2 2014, 03:35 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 2 2014, 05:21 AM
Post #9


.
********

Group: WDG Moderators
Posts: 9,663
Joined: 10-August 06
Member No.: 7
QUOTE(Christian J @ Apr 2 2014, 01:20 AM) *

QUOTE(jimlongo @ Apr 1 2014, 11:33 PM) *

Couldn't you validate by using parseFloat() on the input, and then if it is NaN output an error?

Yes that seems to work, at least after after multiplication:

No it didn't:

CODE
alert(parseFloat(1*'a')); // NaN
alert(typeof parseFloat(1*'a')); // number

happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 2 2014, 05:23 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,663
Joined: 10-August 06
Member No.: 7
QUOTE(M4rshall @ Apr 2 2014, 10:35 AM) *

Is there a way where I can have the result display as a result on the page rather than a pop up???

Yes, use e.g. innerHTML to write the result inside a specified HTML element.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
M4rshall
post Apr 2 2014, 07:36 AM
Post #11


Member
***

Group: Members
Posts: 60
Joined: 8-August 13
Member No.: 19,534
Pardon my ignorance/lack of knowledge but how do I do that?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 2 2014, 07:56 AM
Post #12


.
********

Group: WDG Moderators
Posts: 9,663
Joined: 10-August 06
Member No.: 7
There are search engines, you know. wink.gif

In the meantime, what percentage values are allowed? Any value between 0-70% (like, say 9.2%?), or just the exact values in your first post? I'm trying to write an example that tests the user input properly, but I need to know what to test for.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
M4rshall
post Apr 2 2014, 08:10 AM
Post #13


Member
***

Group: Members
Posts: 60
Joined: 8-August 13
Member No.: 19,534
Cheers Christian - I prefer to come to a group of people that know their stuff rather than rely on conflicting information on Google.... Plus to be fair whenever I search Google the forum always comes up within first 5 or so results biggrin.gif

The remit on discount is the exact value as listed in first post, I'm done a little bit of a modification on the script from Jim to display how the rest of the company forms do but I plan on having the values on a drop down menu as suggested. But I also need to add the additional to the script that you have input above.

CODE


<table class="formclass">
<form name="myform" action="" method="get">

<tr>
<td colspan="2">
<div class="formheader"><font color="#ffffff">Settlement Calculator</div>
<div class="formmessage"><font color="#ffffff">Remember to advise the customer<br><br>
</td>
</tr>

<td>
<font color="#ffffff">Input the Balance of Account <br>
<div class="formmessage2">Do not put £ before the balance</div>
</td>
<td>
<input type="text" name="input_amount" />
</td>
</tr>

<tr>
<td>
<font color="#ffffff">Discount Percent You are able to offer i.e 20 <br>
<div class="formmessage2">Do not put % after amount</div>
</td>
<td>
<input type="text" name="discount_amount" />
</td>
</tr>

<tr>
<td colspan="2" style="text-align:center">
<br>
<input type="submit" value="Calculate Settlement" style="width:200px;height:40px" onclick="calculateDiscount();">
</br>
</br>
</td>
</tr>
</form>

<script type="text/javascript">
function calculateDiscount(){
var amount = document.myform.input_amount.value;
var discount= document.myform.discount_amount.value;
var result = amount - (( amount * discount ) / 100);
alert("The settlement figure to be paid is £" + result);
}
</script>



This post has been edited by M4rshall: Apr 2 2014, 08:12 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
M4rshall
post Apr 2 2014, 08:14 AM
Post #14


Member
***

Group: Members
Posts: 60
Joined: 8-August 13
Member No.: 19,534
Also if you intent to test based on my script, here is the .CSS info needed.

CODE


.formclass {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border: 3px solid #ffffff;
padding:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #000000;
width: 650px; margin: 0 auto;
}
.formheader {
font-size:16px;
font-weight:bold;
padding-top:10px;
padding-bottom:10px;
text-align:center;
}
.formmessage {
text-align:center;
font-size:12px;
padding-bottom:12px;
}
.formmessage2 {
text-align:left;
font-size:12px;
padding-bottom:12px;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 2 2014, 08:52 AM
Post #15


.
********

Group: WDG Moderators
Posts: 9,663
Joined: 10-August 06
Member No.: 7
QUOTE(M4rshall @ Apr 2 2014, 03:10 PM) *

I prefer to come to a group of people that know their stuff rather than rely on conflicting information on Google....

A search for "innerHTML" should turn up plenty of tutorials, some written by people that know far more than me. And it's more fun to help people that make some effort to learn themselves.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
M4rshall
post Apr 2 2014, 10:06 AM
Post #16


Member
***

Group: Members
Posts: 60
Joined: 8-August 13
Member No.: 19,534
Ok so I've gone to the below -

http://www.tizag.com/javascriptT/javascript-innerHTML.php

and I think I have a vague understanding but my output is variable based on the value of the balance and the discount to be applied however the examples given are based on a pre-defined output.

CODE


<script type="text/javascript">
function changeText(){
    document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>



Changes text from -

Welcome to website dude to Welcome to website Fred Flinstone.

So my plan is to create a box under the form that says -

Settlement is £? and then have the ? turn in to value of the balance after discount.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
M4rshall
post Apr 2 2014, 11:22 AM
Post #17


Member
***

Group: Members
Posts: 60
Joined: 8-August 13
Member No.: 19,534
So this is what I came up with but it's not working....

CODE


<tr>
<td colspan="2" style="text-align:center">
<br>
<input type="submit" value="Calculate Settlement" style="width:200px;height:40px" onclick="calculateDiscount();">
</br>
<tr>
<td colspan="2">
<div class="formheader"><font color="#ffffff">Settlement to be paid after discount is £<b> id='boldStuff'>?</b></div></td>
</br>
</td>
</tr>
</form>

<script type="text/javascript">
function calculateDiscount(){
var amount = document.myform.input_amount.value;
var discount= document.myform.discount_amount.value;
var result = amount - (( amount * discount ) / 100);
document.getElementById('boldStuff').innerHTML = '" + result';
}
</script>



I know I'm close (or I think I am), what am I missing please.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 2 2014, 12:09 PM
Post #18


.
********

Group: WDG Moderators
Posts: 9,663
Joined: 10-August 06
Member No.: 7
QUOTE(M4rshall @ Apr 2 2014, 06:22 PM) *

<b> id='boldStuff'>?</b>

The ID attribute is part of the B start tag.

QUOTE
</div></td>
</br>
</td>
</tr>
</form>

That part is very invalid. You really need to learn basic HTML before attempting things like CSS or javascript. There are tutorials and references here on this site (see links at the top and bottom).

- The FONT element needs to be closed. Also FONT is very outdated, instead use more semantically meaningful HTML elements (or SPAN, if there isn't any better) together with CSS.

- The BR tag shouldn't begin with a slash, also BR is not allowed between table cells.

- The table must be closed.

QUOTE
document.getElementById('boldStuff').innerHTML = '" + result';

You only need quotes around strings (plain text), not around variables. Also the quotes must match. Something like:

CODE
innerHTML = 'Here is the '+result;
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
M4rshall
post Apr 3 2014, 05:03 AM
Post #19


Member
***

Group: Members
Posts: 60
Joined: 8-August 13
Member No.: 19,534
Christian - I made it clear that this had come from another site and I was trying to bodge it together because I didn't fully understand it

QUOTE
JavaScript I'm not particularly knowledgeable on and by that I have no clue

I appreciate I made some errors and oversights in my coding but I'm on UK time and you’re not, I was trying to get something together in a rush before I had to leave work and ask for help to see if I was on the right lines.

The font is a company choice, therefore I will use that font. It may not be pleasing to your eye but that's the choice unfortunately.

The BR tag may not be "allowed" but it does work in the tables I have created, for me it creates a Return inside a row & col.

I have made some amends as you highlighted and removed some of my errors. Please could you take another look for me?

CODE

<table class="formclass">
<form name="Settlement Calculator" action="" method="get">

<tr>
<td colspan="2">
<div class="formheader"><font color="#ffffff">Settlement Calculator</div>
<div class="formmessage"><font color="#ffffff">Remember to advise the customer that
</td>
</tr>

<td>
<font color="#ffffff">Input the Balance of Account <br>
<div class="formmessage2">Do not put £ before the balance</div>
</td>
<td>
<input type="text" name="input_amount" />
</td>
</tr>

<tr>
<td>
<font color="#ffffff">Discount Percent You are able to offer i.e 20 <br>
<div class="formmessage2">Do not put % after amount</div>
</td>
<td>
<input type="text" name="discount_amount" />
</td>
</tr>

<tr>
<td colspan="2" style="text-align:center">

<input type="submit" value="Calculate Settlement" style="width:200px;height:40px" onclick="calculateDiscount();">
<tr>
<td colspan="2">
<div class="formheader"><font color="#ffffff">Settlement to be paid after discount is £<id='?'>?</div></td>
</table>
</form>

<script type="text/javascript">
function calculateDiscount(){
var amount = document.myform.input_amount.value;
var discount= document.myform.discount_amount.value;
var result = amount - (( amount * discount ) / 100);
document.getElementById('?').innerHTML = 'Here is the '+result;
}
</script>


This post has been edited by M4rshall: Apr 3 2014, 05:23 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 3 2014, 06:15 AM
Post #20


.
********

Group: WDG Moderators
Posts: 9,663
Joined: 10-August 06
Member No.: 7
QUOTE(M4rshall @ Apr 3 2014, 12:03 PM) *

I was trying to bodge it together because I didn't fully understand it

Sorry about being blunt, but from your code examples it's clear that you don't even know basic HTML. With that background it's a really bad idea to make a company web site. It's also too optimistic to expect others to do your (paid) work for free.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

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

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 4th May 2024 - 03:46 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC