The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML Form to Calculate credit
Deraj
post 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">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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. unsure.gif 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">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Deraj
post 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? biggrin.gif

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 sad.gif - I click the button and nada.

QUOTE(Christian J @ Oct 5 2022, 04:39 PM) *

You need a script to make the calculations, see if this works correctly. unsure.gif 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">


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 6 2022, 03:38 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Deraj @ Oct 6 2022, 06:09 PM) *

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 sad.gif - 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 07:51 AM