passing html input to js file???

[jobojo]

I am trying to write a simple program to calculate income taxes owed based on gross wages that are input by a user. The HTML page needs to accept the input (wages from 4 users) at once and then utilize a button to submit the information to an external javascript file which retrieves the entered data with one function and then uses another function to calculate the income taxes owed. I have most of my HTML file and my JavaScript file completed, however, I am having a very difficult time with my submit button sending the 4 user's inputs to my external JS file and then getting the results back to my HTML file.

Can someone please help me to understand how to send this information to my external js file and then have my js file send the results back. I have tried many different things thus far, but nothing has gotten me any further and I have zero communication between my js file and my html file. I think having the four different inputs that need to pass back to my js file may be causing me to over think things. Therefore, I am just looking for a little help in understanding how this would work. Any help or advice anyone can give me would be greatly appreciated.

Ps: I am not supposed to place any javascript into my html file.

Thanks in advance and I look forward to hearing from one of the experts on this very helpful site.

[~s.o.s~]

The script in case of a SCRIPT element may be defined inside the contents of the SCRIPT element or in an external file. The only difference here is that an additional request is made in the case of an external script file. Hence you can treat your script as though it was embedded in the document even when it comes from an external source.

You have a few options; either pass in the `id' / `name' of the form elements whose values you need to access to the Javascript function or just access them directly from your function assuming that the form elements with the given `name' / `id' are always present.

<input type="text" name="txtOne" id="txtOne">
<input type="text" name="txtTwo" id="txtTwo">
<input type="button" value="Calculate" onclick="getIncomeTax('txtOne', 'txtTwo');">

<!-- OR -->

<input type="text" name="txtOne" id="txtOne">
<input type="text" name="txtTwo" id="txtTwo">
<input type="button" value="Calculate" onclick="getIncomeTax(this.form);">

function getIncomeTax(frm) {
  var e1 = frm.elements['txtOne'];
  var e2 = frm.elements['txtTwo'];
  var iTax = doSomething(e1.value, e2.value);
}

[jobojo]

SOS, thanks for your help. That was exactly the information that I was looking for. I was very close to both of those options but I must have typed something in incorrectly because they were not working for me before. However, it is now working. Thanks again and I appreciate your time and assistance. Have a great day.

[jobojo]

One more quick question for you or anyone: Now that I have the information passing from the HTML to the JS file function, how can I get this information to transfer to my second function within the same js file which calculates the taxes owed. I have tried using the same parameters that I used with my function that retrieved the data from my form, but the information is not passing through to my second function. I have set up alerts within both functions on multiple occasions and the first function which is supposed to retrieve the information from the HTML works as it should, but the second function is not receiving the income information to perform the appropriate calculations. Thanks again for your time and assistance in advance.

[~s.o.s~]

You have a few options:
- Creating hidden fields which hold your temporary results.
- Saving the state in a global variable which can be used across function invocations.
- Creating your own custom object which maintains the state.

[jobojo]

Thanks again SOS and hopefully this should be my last question. Is it acceptable coding practice to place my tax calculation coding within my first function (since all that is doing is retrieving user input from my html page, instead of creating a second function? I have done this and everything appears to work very well.

[jobojo]

SOS thank you for all of your help. I was able to figure out that the way I did my code was not the best nor the "proper" way to do it. However, I was able to figure out how to use the second function so that I could reuse it for all 4 inputs. Trial and error (along with some great advice) on this one has really helped me to learn a lot. Thanks again and take care.

[~s.o.s~]

> Is it acceptable coding practice to place my tax calculation coding within my first function

It would be better if you have two functions: one which is invoked onclick of a button and which reads the values from various form fields and the second which is purely involved with the calculation of tax. This way you separate out the data retrieval/validation part from the actual logic, in your case, tax calculation.

[jobojo]

Thank you for the information and have a great upcoming weekend.