performing calculations in a popup box

I2izzo

03-06-2012, 12:25 AM

This is a homework assignment I am trying to work on. Simple put my goal is to be able to click a "generate payslip" button and it should pop up "(firstname)(lastname), you will pay (var1*0.2) in federal taxes and (var2*0.1) in state taxes. Then i will add a reset button to the fields. I am NOT asking you to do this for me, i just need some help on what im doing wrong seeing as my teacher refuses to be of any help.

Here is what i got.. dont laugh.

After literally spending hours on the computer trying to find help codes I took out the bulk of trash i had in there because it never worked, but at one point i had something like this
var1 = num1
var2 = num2
var3 = num3
var answer= num3*0.2
var answer2= num3*0.1

Then i tried to include that in my alert box and even tweaked it over and over and either completely eliminated the alert box itself or include all the text in my equation.

Either way, if someone can enlighten me on how to properfly perform a calculation in an alert box i would be ecstatic.

<HTML>
<HEAD>
<center><b>
Here is a pay slip generator that will determine your net annual salary.
Simply type in your first and last name along with gross salary and hit calculate.
Doing this will let you know how much you will end up paying in both Federal and State taxes.
</center></b>

<form action="" method="post" name="GPS">

<p> Enter your First Name:
<input name="num1" type="text" id="num1" size="10" maxlength="10">
</p>
<p> Enter your Last Name:
<input name="num2" type="text" id="num2" size="10" maxlength="10">
</p>
<p> Enter your gross salary:
<input name="num3" type="#" id="num3" size="10" maxlength="10">
</p>

Click this button to calulate your annual net pay!
<script type="text/javascript">

function calculate()
{
alert("You type something");
}
</script>
<input type="button" onclick="calculate()" value="Generate Pay Slip" />

</FORM>
</body>
</html>

</script>

webdev1958

03-06-2012, 12:52 AM

You get bonus points for being honest and saying this is a homework assignment. Most noobies come in asking for help on code they are supposedly working on for "clients".

Anyway, let's invoke KISS and not over complicate things atm by worrying about data validation. I'll assume a user won't enter letters in an input that expects a number and vice versa.

The first thing you need to do is get the <form> data into variables in your calculate().

All html elements are objects, and objects can have properties and/or methods (functions) to access or manipulate those properties. id is a common property to most elements/objects.

To access an object you can use the DOM's (Document Object Model) getElementById() method. To access a property of an object you append the property's name with a dot to the object's reference. ie. objectRef.id would return the id of an element.

So, to get the first name entered by the user you could have something like

function calculate(){
var fName = document.getElementById('num1').value;
alert('First name = '+ fName); //for testing
}Note also, that all inputs are strings even when you enter a number like salary and so they have to be converted to a number in order to do any calulations with them. You can use Number(), parseInt() or parseFloat(). My preference is Number(). To get the salary into a number variable so you can calculate the taxes you cpould do something like this

var sal = Number(document.getElementById('num3').value);So, have a go at getting the 3 inputs into variables at the top of your function and check them with alert() statements. One you have the form data stored in varibales correctly, calculate the taxes and output the information you need in an alert() at the end of your calculate().

If you need more help, post back.

A couple of side issues.

1) The <center> tag is obsolete and deprecated and so should not be used. There are more appropriate css styles to centre text or whatever.

2) The name attribute in <form> is deprecated and is not needed at all.

I2izzo

03-06-2012, 04:06 AM

WebDev1958.... you my friend are a genius. I am an accounting major and cannot believe how hard this stuff can be, after your words of wisdom I took out the name attribute and center tag and got finished with this code:

<script type="text/javascript">

function calculate()
{
var fName = document.getElementById('num1').value;
var lname = document.getElementById('num2').value;
var sal = Number(document.getElementById('num3').value);
alert('Hello '+ fName + ' '+ lname + ', you would pay $'+ sal * .2 + ' in Federal taxes and $'+ sal * .1 + ' in State taxes, leaving you $'+ sal * .7 + ' to take home annually!'); //for testing
}

</script>

<input type="button" onclick="calculate()" value="Generate Pay Slip" />

It works like a charm!!! (sorry I don't know how to be cool and add the source code the way you did)

I think my last required part is to add a clear function to clear all the texts, Im sure ill be able to find it with some internet research.
If I get stuck somewhere ill let you know, thank you immensely for all the help!!!

webdev1958

03-06-2012, 04:16 AM

glad it's sorted out :)

I'll give you a hint about the last part to clear inputs.

Just like you can put user inputs into variables like you did with the generic

var myVar = objectRef.value;you can do the reverse to assign or clear values in elements:

objectRef.value = '';or if you are using a <form> you can use the predefined Reset button which clears or returns to defaults all form inputs.

<input type='reset' value='Reset form' />

webdev1958

03-06-2012, 04:20 AM

(sorry I don't know how to be cool and add the source code the way you did)

To make posted code easier to read you can wrap it in code tags by simply highlighting your code first and then click the # icon in the editor's toolbar.

I2izzo

03-06-2012, 04:34 AM

To make posted code easier to read you can wrap it in code tags by simply highlighting your code first and then click the # icon in the editor's toolbar.

Lol, I was able to get the clear form button very easily and noticed the assignment wanted to me to include my results for taxes in another web page AS WELL AS the popup. uggh, ima start working on that now. if i cant figure out ill post what I have attained or tried, thanks again, I appreciate it so much!