Javascript form sum of form inputs
Question
I have this form working almost perfect. If I apply discount to default price is changes, if I apply taxes it autofills too. But the last field with the sum of price after discount plus taxes is not working. Any idea?
Here is the code and a Fiddle
<html>
<body>
<table width="339" border="0" cellpadding="0">
<tr>
<td width="98">Taxes</td>
<td width="115">Discount</td>
<td width="118">Default price</td>
</tr>
<tr>
<td><select class="select" name="taxes" onChange="updateInput()">
<option value="no" selected>no taxes</option>
<option value="19">19% taxes</option> <!-- <====================== -->
</select></td>
<td><select class="select" name="discount" onChange="updateInput()">
<option value="0" selected>0% discount</option>
<option value="5">5% discount</option>
<option value="10">10% discount</option>
<option value="20">20% discount</option>
</select></td>
<td><input type="text" class="input140" name="cost" id="cost" value="1000"></td>
</tr>
<tr>
<td>Price after discount</td>
<td>Taxes</td>
<td>Total Price to pay</td>
</tr>
<tr>
<td><input type="text" name="price" value="1000"></td>
<td><input type="text" name="ttaxes" value="0"></td> <!-- <====================== -->
<td><input type="text" name="total" value="0"></td>
</tr>
</table>
<script type="text/javascript">
function updateInput(){
var discount = document.getElementsByName("discount")[0].value;
var cost = document.getElementsByName("cost")[0].value;
document.getElementsByName("price")[0].value = cost - (cost * (discount / 100));
var taxes = document.getElementsByName("taxes")[0].value; // <======================
if ( isNaN( taxes ) ) // IF "no taxes" IS SELECTED...
document.getElementsByName("ttaxes")[0].value = 0;
else { cost = document.getElementsByName("price")[0].value;
document.getElementsByName("ttaxes")[0].value = (cost * (taxes / 100));
}
}
</script>
</body>
</html>
The Fiddle DEMO
https://jsfiddle.net/nte6xqdv/7/
I need the last field Total to pay to sum "Price after discount Taxes" automaticly but is not working
Thanks a lot
4 answers
solution1
0 2015-06-17 17:45:22
I guess your problem is that two input are string, and you used + operator to concatenate them. It should be converted to a number to do add operation.
var total = document.getElementsByName("total")[0];
total.value = parseFloat(document.getElementsByName("price")[0].value) +
parseFloat(document.getElementsByName("ttaxes")[0].value);
solution2
0 2015-06-17 17:54:59
function updateInput(){
var total = document.getElementsByName("total")[0];
var taxes = document.getElementsByName("ttaxes")[0].value;
var price = document.getElementsByName("price")[0].value;
var discount = document.getElementsByName("discount")[0].value;
var cost = document.getElementsByName("cost")[0].value;
document.getElementsByName("price")[0].value = cost - (cost * (discount / 100));
var taxes = document.getElementsByName("taxes")[0].value; // <======================
if ( isNaN( taxes ) ) // IF "no taxes" IS SELECTED...
document.getElementsByName("ttaxes")[0].value = 0;
else { cost = document.getElementsByName("price")[0].value;
document.getElementsByName("ttaxes")[0].value = parseInt(cost * (taxes / 100));
}
total.value = parseInt(taxes * 10) + parseInt(price) || parseInt(price); //No NaNs
}
solution3
0 2015-06-17 18:11:43
call updateInput whenever the input changes uses jQuery... jQuery is very simple to use, and learn, and every JavaScript programmer should know how to use it.
In jquery... invoke the change callback:
$("#inputFieldIdHere").change(updateInput())
What will this do?
This will do several things. It will:
- Wait until the input field has changed whatever is inside
- When the contents of the input field changes it will call the function:
updateInput()
solution4
0 ACCPTED 2015-06-17 18:13:06
You may find it easier to identify the issues you are having if you separate out each part of the process.
If you store all of the elements you are going to be using at the beginning you will make your calculations easier to read plus avoid unnecessary DOM calls.
/** * Elements */ var taxes = document.getElementsByName('taxes')[0]; var discount = document.getElementsByName('discount')[0]; var cost = document.getElementsByName('cost')[0]; var price = document.getElementsByName('price')[0]; var ttaxes = document.getElementsByName('ttaxes')[0]; var total = document.getElementsByName('total')[0]; /** * Calculations */ function updateInput() { price.value = cost.value - (cost.value * (discount.value / 100)); ttaxes.value = (price.value * (taxes.value / 100)); var sum = parseFloat(price.value) + parseFloat(ttaxes.value); total.value = sum.toFixed(2); } /** * Event Listeners */ taxes.addEventListener('change', updateInput); discount.addEventListener('change', updateInput); cost.addEventListener('change', updateInput); cost.addEventListener('keyup', updateInput);
<table width="339" border="0" cellpadding="0"> <tr> <td width="98">Taxes</td> <td width="115">Discount</td> <td width="118">Default price</td> </tr> <tr> <td> <select name="taxes" class="select"> <option value="0" selected>no taxes</option> <option value="19">19% taxes</option> </select> </td> <td> <select name="discount" class="select"> <option value="0" selected>0% discount</option> <option value="5">5% discount</option> <option value="10">10% discount</option> <option value="20">20% discount</option> </select> </td> <td> <input type="text" name="cost" class="input140" value="1000"> </td> </tr> <tr> <td>Price after discount</td> <td>Taxes</td> <td>Total Price to pay</td> </tr> <tr> <td><input type="text" name="price" value="1000"></td> <td><input type="text" name="ttaxes" value="0"></td> <td><input type="text" name="total" value="0"></td> </tr> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.