Efficient Form Calculation for Total with Multiple Solutions
Setting up a form named datain with input fields for price and quantity, this guide explains the process of calculating and displaying the total dynamically using JavaScript by referencing field addresses and passing data to functions on user interaction. The step-by-step solution involves retrieving field values, performing calculations, and updating the total field accordingly. The approach showcases a practical method for handling form calculations efficiently.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Calculate Total This is a problem on a form where the user enters information and calculations are done to show the answer. I will show multiple solutions.
I am first calculating ans1 so I use the address for each of the fields to do the calculation. I refer to the fields as document.form name which is datain.field name.value. For example: document.datain.price1.value After we do the four calculations, I added the four Answers and stored them in document.datain.theTotal.value Notice that this is the address where theTotal is located. Again, data was not passed. A better solution would include passing. This is the form I set up. Its name is datain. I have set up input type fields where I can enter the price and the quantity 4 times in different fields. If I click on Total then the onclick event will call calcTotal() and if I click on Clear I will call clearTotal(). I have set up a field with the name theTotal where I will put the answer. Since I did not send data to calcTotal(), I have to use the entire address.
I am sending the names of the fields where the data is stored. So I receive the data and use the value to do the calculations. Then I calculated theTotal and assign it to document.datain.theTotal.value. I had to give the complete address for the answer.
The onclick event send the data. The structure also sets up theTotal to be assigned the data that the function returns. The function returns the content of the totAns.
This is using getElementById to get the information. The return is being assigned to the field called theTotal on the form. An alternate way to clear the data from the form is <a href="javascript:location.reload(true)">Refresh this page</a> Here the totAns that is returned becomes the value of the input type text called theTotal.
