Solved

# Multiply and add fields on an HTML Form using Javascript

Posted on 2011-10-11
Medium Priority
473 Views
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

``````<html>

<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 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 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>
``````
0
Question by:wesmanbigmig13
• 5
• 3
• 3

LVL 20

Expert Comment

ID: 36953987
var product1quantity = parseFloat(document.getElementById("product1quantity").options[document.getElementById("product1quantity").selectedIndex].value);
0

Author Comment

ID: 36953996
Thanks chaituu - please can you integrate/embed this into the code for products 1 and 2 so that I can test it.

Thanks
0

LVL 39

Expert Comment

ID: 36954002
try this
``````<html>
<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>

<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 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="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>
``````
0

Author Comment

ID: 36954012
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

0

Author Comment

ID: 36954024
I would like the formatting (for example \$80.00) to be applied to the product1total, product2total and total boxes please pratima_mcs

Many thanks
0

LVL 20

Expert Comment

ID: 36954028
"\$"+form.product2total.value.toFixed( 2 );
0

Author Comment

ID: 36954038
chaituu: Please add it to the code so that I can test it.
0

LVL 20

Expert Comment

ID: 36954047
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.toFixed(2);
}
0

LVL 39

Expert Comment

ID: 36954062
``````<html>
<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>
<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 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="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>
``````
0

LVL 39

Accepted Solution

Pratima Pharande earned 2000 total points
ID: 36954086
this is perfect solution
``````<html>
<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).toFixed(2);
form.product1totaltemp.value = "\$" + form.product1total.value ;
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).toFixed(2);
form.product2totaltemp.value = "\$" + form.product2total.value;
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).toFixed(2);
form.total.value = "\$" + form.total.value;
}
</script>
<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 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="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>
``````
0

Author Closing Comment

ID: 36954594
Absolutely perfect - thank you!
0

## Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript ā¦
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is ā how do I become a web developer?
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed usā¦
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in aā¦
###### Suggested Courses
Course of the Month15 days, 10 hours left to enroll