Multiply and add fields on an HTML Form using Javascript
Hi Experts
I would like to create a simple product ordering form. I have the basic code in place but now I need to complete the code required to do the calculations on the form.
A user selects from the dropdown for Product 1
They then select the quantity for their selection
As soon as they select the quantity, the total for that line must be shown in the box product1total
Basically, I am looking for the code that multiplies the quantity by the amount for the product they have entered. The amount is included in the dropdown menu description for each product line.
When the user has made their choices for Product 1, they can then select their choices for Product 2, and the quantity for that choice for Product 2. The form should then display the multiplied total for Product 2 x Product2Quantity in the box product2total
I have then already created a script that adds product1total + product2total and shows the grand total in the box called total.
Please find below my code so far - please can someone provide the code required to make the Product X x ProductXQuantity value show in the productXtotal box.
Many thanks
I would like to create a simple product ordering form. I have the basic code in place but now I need to complete the code required to do the calculations on the form.
A user selects from the dropdown for Product 1
They then select the quantity for their selection
As soon as they select the quantity, the total for that line must be shown in the box product1total
Basically, I am looking for the code that multiplies the quantity by the amount for the product they have entered. The amount is included in the dropdown menu description for each product line.
When the user has made their choices for Product 1, they can then select their choices for Product 2, and the quantity for that choice for Product 2. The form should then display the multiplied total for Product 2 x Product2Quantity in the box product2total
I have then already created a script that adds product1total + product2total and shows the grand total in the box called total.
Please find below my code so far - please can someone provide the code required to make the Product X x ProductXQuantity value show in the productXtotal box.
Many thanks
<html>
<head>
</head>
<body>
<form name="form" method="post" action="">
<script>
function UpdateTotal(numInput)
{
var num1 = parseFloat(numInput.form.product1total.value);
var num2 = parseFloat(numInput.form.product2total.value);
num1 = isNaN(num1) ? 0 : num1;
num2 = isNaN(num2) ? 0 : num2;
numInput.form.total.value = num1 + num2;
}
</script>
<td class="bodytext" ><p><span class="sectionintro"><font color="#1F267E">Product 1</font></span><font color="#1F267E"><br>
</font><br>
<select name="product1" class="bodytext" id="product1" tabindex="0">
<option selected>Please select here</option>
<option value="Product 1 - Pair">1 Pair Product 1 - $40</option>
<option value="Product 1 - Single">Single Product 1 - $25</option>
</select>
<select name="product1quantity" class="bodytext" id="product1quantity" tabindex="0">
<option>Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input name="product1total" type="text" id="product1total" size="6" maxlength="6" value="" onchange="UpdateTotal(this);">
<br>
<span class="sectionintro"><br>
<font color="#1F267E">Product 2</font></span><font color="#1F267E"><br>
<br>
</font>
<select name="product2" class="bodytext" id="product2" tabindex="0">
<option selected>Please select here</option>
<option value="Product 2 - Pair - Colour 1">1 Pair Product 2 - Colour 1 - $30</option>
<option value="Product 2 - Pair - Colour 2">1 Pair Product 2 - Colour 2 - $40</option>
<option value="Product 2 - Pair - Colour 3">1 Pair Product 2 - Colour 3 - $50</option>
</select>
<select name="product2quantity" class="bodytext" id="product2quantity" tabindex="0">
<option>Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input name="product2total" type="text" id="product2total" size="6" maxlength="6" value="" onchange="UpdateTotal(this);">
</p>
<p><strong>Total</strong></p>
<input name="total" value=""></td>
</form>
</body>
</html>
chaitu chaitu
var product1quantity = parseFloat(document.getEle
ASKER
Thanks chaituu - please can you integrate/embed this into the code for products 1 and 2 so that I can test it.
Thanks
Thanks
try this
<html>
<head>
<script language="javascript">
function UpdateProduct1()
{
var num1 = parseFloat(form.product1.options[form.product1.selectedIndex].value);
var num2 = parseFloat(form.product1quantity.options[form.product1quantity.selectedIndex].value);
num1 = isNaN(num1) ? 0 : num1;
num2 = isNaN(num2) ? 0 : num2;
form.product1total.value = num1 * num2;
UpdateTotal();
}
function UpdateProduct2()
{
var num1 = parseFloat(form.product2.options[form.product2.selectedIndex].value);
var num2 = parseFloat(form.product2quantity.options[form.product2quantity.selectedIndex].value);
num1 = isNaN(num1) ? 0 : num1;
num2 = isNaN(num2) ? 0 : num2;
form.product2total.value = num1 * num2;
UpdateTotal();
}
function UpdateTotal()
{
var num1 = parseFloat(form.product1total.value);
var num2 = parseFloat(form.product2total.value);
num1 = isNaN(num1) ? 0 : num1;
num2 = isNaN(num2) ? 0 : num2;
form.total.value = num1 + num2;
}
</script>
</head>
<body>
<form name="form" method="post" action="" ID="Form1">
<td class="bodytext" ><p><span class="sectionintro"><font color="#1F267E">Product 1</font></span><font color="#1F267E"><br>
</font><br>
<select name="product1" class="bodytext" id="product1" tabindex="0" onchange="UpdateProduct1()">
<option selected>Please select here</option>
<option value="40">1 Pair Product 1 - $40</option>
<option value="25">Single Product 1 - $25</option>
</select>
<select name="product1quantity" class="bodytext" id="product1quantity" tabindex="0" onchange="UpdateProduct1()">
<option>Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input name="product1total" type="text" id="product1total" size="6" maxlength="6" value="" onchange="UpdateTotal(this);">
<br>
<span class="sectionintro"><br>
<font color="#1F267E">Product 2</font></span><font color="#1F267E"><br>
<br>
</font>
<select name="product2" class="bodytext" id="product2" tabindex="0" onchange="UpdateProduct2()">
<option value="0" selected>Please select here</option>
<option value="30">1 Pair Product 2 - Colour 1 - $30</option>
<option value="40">1 Pair Product 2 - Colour 2 - $40</option>
<option value="50">1 Pair Product 2 - Colour 3 - $50</option>
</select>
<select name="product2quantity" class="bodytext" id="product2quantity" tabindex="0" onchange="UpdateProduct2()">
<option>Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input name="product2total" type="text" id="product2total" size="6" maxlength="6" value="" onchange="UpdateTotal();">
</p>
<p><strong>Total</strong></p>
<input name="total" value="" ID="Text1"></td>
</form>
</body>
</html>ASKER
pratima_mcs: that is almost perfect. Just one thing I would like to do is add a $ sign and .00 to the amount box so that it shows for example $80.00 instead of just 80
Are you able to update your code to make it do that and I will then award you the 500 points.
Thanks
Are you able to update your code to make it do that and I will then award you the 500 points.
Thanks
ASKER
I would like the formatting (for example $80.00) to be applied to the product1total, product2total and total boxes please pratima_mcs
Many thanks
Many thanks
"$"+form.product2total.val
ASKER
chaituu: Please add it to the code so that I can test it.
function UpdateTotal()
{
var num1 = parseFloat(form.product1to
var num2 = parseFloat(form.product2to
num1 = isNaN(num1) ? 0 : num1;
num2 = isNaN(num2) ? 0 : num2;
form.total.value = "$"+num1 + num2.toFixed(2);
}
{
var num1 = parseFloat(form.product1to
var num2 = parseFloat(form.product2to
num1 = isNaN(num1) ? 0 : num1;
num2 = isNaN(num2) ? 0 : num2;
form.total.value = "$"+num1 + num2.toFixed(2);
}
<html>
<head>
<script language="javascript">
function UpdateProduct1()
{
var num1 = parseFloat(form.product1.options[form.product1.selectedIndex].value);
var num2 = parseFloat(form.product1quantity.options[form.product1quantity.selectedIndex].value);
num1 = isNaN(num1) ? 0 : num1;
num2 = isNaN(num2) ? 0 : num2;
form.product1total.value = num1 * num2;
form.product1totaltemp.value = "$" + form.product1total.value + ".00"
UpdateTotal();
}
function UpdateProduct2()
{
var num1 = parseFloat(form.product2.options[form.product2.selectedIndex].value);
var num2 = parseFloat(form.product2quantity.options[form.product2quantity.selectedIndex].value);
num1 = isNaN(num1) ? 0 : num1;
num2 = isNaN(num2) ? 0 : num2;
form.product2total.value = num1 * num2;
form.product2totaltemp.value = "$" + form.product2total.value + ".00"
UpdateTotal();
}
function UpdateTotal()
{
var num1 = parseFloat(form.product1total.value);
var num2 = parseFloat(form.product2total.value);
num1 = isNaN(num1) ? 0 : num1;
num2 = isNaN(num2) ? 0 : num2;
form.total.value = num1 + num2 ;
form.total.value = "$" + form.total.value + ".00"
}
</script>
</head>
<body>
<form name="form" method="post" action="" ID="Form1">
<td class="bodytext"><p><span class="sectionintro"><font color="#1F267E">Product 1</font></span><font color="#1F267E"><br>
</font>
<br>
<select name="product1" class="bodytext" id="product1" tabindex="0" onchange="UpdateProduct1()">
<option selected>Please select here</option>
<option value="40">1 Pair Product 1 - $40</option>
<option value="25">Single Product 1 - $25</option>
</select>
<select name="product1quantity" class="bodytext" id="product1quantity" tabindex="0" onchange="UpdateProduct1()">
<option>Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input name="product1totaltemp" type="text" id="product1totaltemp" size="6" maxlength="6" value=""
onchange="UpdateTotal(this);">
<input name="product1total" type="hidden" id="product1total" size="6" maxlength="6" value=""
onchange="UpdateTotal(this);">
<br>
<span class="sectionintro">
<br>
<font color="#1F267E">Product 2</font></span><font color="#1F267E"><br>
<br>
</font>
<select name="product2" class="bodytext" id="product2" tabindex="0" onchange="UpdateProduct2()">
<option value="0" selected>Please select here</option>
<option value="30">1 Pair Product 2 - Colour 1 - $30</option>
<option value="40">1 Pair Product 2 - Colour 2 - $40</option>
<option value="50">1 Pair Product 2 - Colour 3 - $50</option>
</select>
<select name="product2quantity" class="bodytext" id="product2quantity" tabindex="0" onchange="UpdateProduct2()">
<option>Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input name="product2totaltemp" type="text" id="product2totaltemp" size="6" maxlength="6" value=""
onchange="UpdateTotal();">
<input name="product2total" type="hidden" id="product2total" size="6" maxlength="6" value=""
onchange="UpdateTotal();">
</p>
<p><strong>Total</strong></p>
<input name="total" value="" ID="Text1">
</td>
</form>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Absolutely perfect - thank you!