HTML Form to Calculate credit |
HTML Form to Calculate credit |
Deraj |
Oct 5 2022, 04:18 PM
Post
#1
|
Group: Members Posts: 2 Joined: 5-October 22 Member No.: 28,575 |
Hello all! - I have a simple HTML form that I am attempting to create for my employees to use to calculate the amount of credit to issue customers when they are without service. However, I cannot figure out how to get the form to calculate or if I've even set this up properly. - Once the agent clicks calculate, it should add InternetPackage+PhonePackage+AddOns, divide by 30, then multiple by Number of Days.
<FORM Name="TimeWithoutService"> <SELECT NAME="InternetPackage" onChange="calculatePrice()" id="InternetPackage"> <OPTION value="0">Select Internet Package</OPTION> <OPTION value="49.95">100M bps</OPTION> <OPTION value="79.95">1 Gig</OPTION> <OPTION value="99.95">2 Gig</OPTION> </SELECT> <br> <br> <SELECT NAME="PhonePackage" onChange="calculatePrice()" id="PhonePackage"> <OPTION value="0">Select Phone Package</OPTION> <OPTION value="0">None</OPTION> <OPTION value="29.95">Voice Bundled with Internet</OPTION> <OPTION value="39.95">Voice without Internet</OPTION> </SELECT> <br> <br> <SELECT NAME="AddOns" onChange="calculatePrice()" id="AddOns"> <OPTION value="0">Select Add-on Options</OPTION> <OPTION value="0">None</OPTION> <OPTION value="4.95">Managed Wi-Fi</OPTION> <OPTION value="3">Safe & Secure</OPTION> <OPTION value="7.95">Managed Wi-Fi AND Safe & Secure</OPTION> </SELECT> <br> <br> <label for="days">Number of Days:</label><br> <input type="text" id="days" name="days"> </FORM> <br> <br> <button type="button" onclick="calculatePrice()">Calculate</button> The new calculated price:<INPUT type="text"> |
Christian J |
Oct 5 2022, 04:39 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
You need a script to make the calculations, see if this works correctly. I also added an ID to the NewPrice field:
CODE <script> function calculatePrice() { var days=document.getElementById('days').value; var InternetPackage=document.getElementById('InternetPackage').value; var PhonePackage=document.getElementById('PhonePackage').value; var AddOns=document.getElementById('AddOns').value; document.getElementById('NewPrice').value=days*(InternetPackage*1+PhonePackage*1+AddOns*1)/30; } </script> ... The new calculated price:<INPUT type="text" id="NewPrice"> |
Deraj |
Oct 6 2022, 11:09 AM
Post
#3
|
Group: Members Posts: 2 Joined: 5-October 22 Member No.: 28,575 |
Obviously I am not the most knowledgeable person in this, so would you mind doing a "for dummies" explanation?
A couple of questions: 1. Does this script need to be put in any particular place in the HTML file? 2. I tested by placing this script at the end of the document after the </form> tag, and it doesn't do anything - I click the button and nada. You need a script to make the calculations, see if this works correctly. I also added an ID to the NewPrice field: CODE <script> function calculatePrice() { var days=document.getElementById('days').value; var InternetPackage=document.getElementById('InternetPackage').value; var PhonePackage=document.getElementById('PhonePackage').value; var AddOns=document.getElementById('AddOns').value; document.getElementById('NewPrice').value=days*(InternetPackage*1+PhonePackage*1+AddOns*1)/30; } </script> ... The new calculated price:<INPUT type="text" id="NewPrice"> |
Christian J |
Oct 6 2022, 03:38 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
1. Does this script need to be put in any particular place in the HTML file? Anywhere in the BODY section. Here's an example: CODE <FORM Name="TimeWithoutService"> <SELECT NAME="InternetPackage" onChange="calculatePrice()" id="InternetPackage"> <OPTION value="0">Select Internet Package</OPTION> <OPTION value="49.95">100M bps</OPTION> <OPTION value="79.95">1 Gig</OPTION> <OPTION value="99.95">2 Gig</OPTION> </SELECT> <br> <br> <SELECT NAME="PhonePackage" onChange="calculatePrice()" id="PhonePackage"> <OPTION value="0">Select Phone Package</OPTION> <OPTION value="0">None</OPTION> <OPTION value="29.95">Voice Bundled with Internet</OPTION> <OPTION value="39.95">Voice without Internet</OPTION> </SELECT> <br> <br> <SELECT NAME="AddOns" onChange="calculatePrice()" id="AddOns"> <OPTION value="0">Select Add-on Options</OPTION> <OPTION value="0">None</OPTION> <OPTION value="4.95">Managed Wi-Fi</OPTION> <OPTION value="3">Safe & Secure</OPTION> <OPTION value="7.95">Managed Wi-Fi AND Safe & Secure</OPTION> </SELECT> <br> <br> <label for="days">Number of Days:</label><br> <input type="text" id="days" name="days" oninput="calculatePrice()"> </FORM> <br> <br> <button type="button" onclick="calculatePrice()">Calculate</button> The new calculated price:<INPUT type="text" id="NewPrice"> <script> function calculatePrice() { var days=document.getElementById('days').value; var InternetPackage=document.getElementById('InternetPackage').value; var PhonePackage=document.getElementById('PhonePackage').value; var AddOns=document.getElementById('AddOns').value; document.getElementById('NewPrice').value=days*(InternetPackage*1+PhonePackage*1+AddOns*1)/30; } </script> BTW I also changed the Days field to this: CODE <input type="text" id="days" name="days" oninput="calculatePrice()"> so the script will run when the user enters days as well. Note that the script will run already after the first SELECT menu is changed, which could make users forget to change/edit all fields before looking at the new calculated price. Perhaps it would be safest to remove all events except the one in the button? QUOTE 2. I tested by placing this script at the end of the document after the </form> tag, and it doesn't do anything - I click the button and nada. Did you test the HTML file on your local desktop, and if so have you allowed your browser to run javascript locally? |
Lo-Fi Version | Time is now: 29th March 2024 - 07:51 AM |