html form input javascript sum fields
Question
I have a form where you can chose if customer pay taxes or not, if we give discount, default price, price after discount, price after taxes and total price.
Here is what I have:
<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">
<option value="no" selected>no taxes</option>
<option value="yes">19% taxes</option>
</select>
</td>
<td>
<select class="select" name="discount" onChange="updateInput()">
<option value="5" selected>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="">
</td>
<td>
<input type="text" name="taxes" value="0">
</td>
<td>
<input type="text" name="total" value="0">
</td>
</tr>
</table>
<script>
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));
}
</script>
I am trying to make this form to work but if I repeat the javascript used it does not work.
Here is the demo Fiddle
https://jsfiddle.net/nte6xqdv/6/
We have the default price 1.000 working fine, if we add discount to customer it changed fine to price after discount
BUT If I select yes to taxes 19% it does mot change anything and the total price to pay after discount plus taxes is not working neither. Any idea?
1 answers
solution1
0 ACCPTED 2015-06-16 22:45:49
Your code is almost fine, just requires some little fixes : you were using the same name for the select "taxes" and the input "taxes" (now "ttaxes"), you assigned the value "yes" to the tax (I changed it by 19), finally, copy-pasted your own code to calculate discount (used to calculate taxes). Now you have only one thing to do : calculate the sum of both (total price). Here it is, the changes are pointed by commented arrows :
<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="5" selected>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=""></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("cost")[0].value;
document.getElementsByName("ttaxes")[0].value = (cost * (taxes / 100));
}
document.getElementsByName("total")[0].value =
parseFloat( document.getElementsByName("price")[0].value ) +
parseFloat( document.getElementsByName("ttaxes")[0].value );
}
</script>
</body>
</html>
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.