Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Web Site Functionality _ Webpage Percent Calculator

Posted by: M4rshall Apr 1 2014, 03:42 AM

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

Posted by: Christian J Apr 1 2014, 09:13 AM

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.

Posted by: M4rshall Apr 1 2014, 10:07 AM

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.

Posted by: jimlongo Apr 1 2014, 11:34 AM

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>

Posted by: Christian J Apr 1 2014, 04:08 PM

Note that if you use a complete HTML form with javascript you need to add a "return false" in the event:

CODE

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#number-state-(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?).

Posted by: jimlongo Apr 1 2014, 04:33 PM

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?).

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

Posted by: Christian J Apr 1 2014, 06:20 PM

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

(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

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

Posted by: M4rshall Apr 2 2014, 03:35 AM

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.

Posted by: Christian J Apr 2 2014, 05:21 AM

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

Posted by: Christian J Apr 2 2014, 05:23 AM

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.

Posted by: M4rshall Apr 2 2014, 07:36 AM

Pardon my ignorance/lack of knowledge but how do I do that?

Posted by: Christian J Apr 2 2014, 07:56 AM

There are search engines, you know.

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.

Posted by: M4rshall Apr 2 2014, 08:10 AM

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

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>

Posted by: M4rshall Apr 2 2014, 08:14 AM

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;
}

Posted by: Christian J Apr 2 2014, 08:52 AM

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.

Posted by: M4rshall Apr 2 2014, 10:06 AM

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

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.

Posted by: M4rshall Apr 2 2014, 11:22 AM

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.

Posted by: Christian J Apr 2 2014, 12:09 PM

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;

Posted by: M4rshall Apr 3 2014, 05:03 AM

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>

Posted by: Christian J Apr 3 2014, 06:15 AM

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.

Posted by: M4rshall Apr 3 2014, 06:54 AM

My HTML coding is working fine - I understand what I need and I obtain the results I want to obtain from my knowledge. If the doesn't fit your model of coding then that is fine but I can't and won't make any apology for that - everyone codes the way that suits them and the results they want to obtain.

JavaScript is the one thing that I am struggling with and I have stated that from the very beginning when you suggested it. I ask for assistance and help on a help forum - the whole point of operating a help forum. Not once have asked in this post for you to do my paid job for me.

All I am asking is, now you have directed me in the best direction to obtain the result I want to achieve, I have gone away obtained some coding and made amendments to try obtain my required end result. You highlighted some errors I had made in hast with my HTML & Java coding. As a grown man I accepted that I had made a mistake and amended as per your suggestions. I have applied the update to my page and the end result isn't working, please could you look at my updated coding and give me some direction as to why this isn't working.

Posted by: Frederiek Apr 3 2014, 11:16 AM

In fact it's not that difficult. You need a hook so the javascript knows where to place that innerHTML thing. So, change your div with this:

CODE

<div class="formheader">Settlement to be paid after discount is £ <span id="sum">000</span>.</div>

Then, there's the NAME you gave to the FORM. That doesn't match the name used in the javascript (and besides has a space in it, which it shouldn't have).

There are some HTML errors inside the TABLE structure, concerning closing </td> and </tr> tags. Indentation helps to see the proper structure of tags.
And though the FONT tag is deprecated, it does need a closing tag. But you'd don't even need it, as you can give the color in CSS: color: #ffffff;

See how the coding looks now (BTW, just about 5 minutes work):

form.html ( 1.94k ) Number of downloads: 387

Posted by: M4rshall Apr 4 2014, 08:35 AM

Hi Frederiek,

I have managed to get the coding to work fairly well now and also made a few further amends.

CODE

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

<td>
<font color="#ffffff">Input the Balance of Account <br>
</td>
<td>
<font color="#ffffff">£<input type="text" name="input_amount" />
</td>
</tr>

<tr>
<td>
<font color="#ffffff">Discount Percent You are able to offer<br>
</td>
<td>
<input type="text" name="discount_amount" /><font color="#ffffff">%
</td>
</tr>

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

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

<script type="text/javascript">
function calculateDiscount(frm){
var amount = Number(frm.input_amount.value) || 0; // trap NaN entries
var discount = Number( frm.discount_amount.value) || 0;
var result = amount - (( amount * discount ) / 100);
document.getElementById('total').innerHTML ="Settlement to be paid after discount is £ "+result.toFixed(2);
}
</script>

Posted by: jimlongo Apr 4 2014, 10:17 AM

Great, now just remove all those font tags.

Posted by: Frederiek Apr 4 2014, 11:14 AM

But there are still errors in the structure of the table. The second and fifth rows don't have the necessary row tags: <tr>…</tr>.

And start making a validator your friend. Which one depends on the DOCTYPE you use in your page.
For (X)HTML 4, http://htmlhelp.com/tools/validator/ is a good choice as it gives links to the HTML reference where needed.
Or use the http://validator.w3.org for all DOCTYPES, including HTML5.

And I agree with Jim, that you shouldn't use those font tags. Put the color in the CSS. If not on the body tag, then maybe in the class selector of the table.