EKBG EKBG - 21 days ago 5
HTML Question

Drop-down for discount calculation in javascript

I tried to get

gross total
value from
discount
calculation to
sub total
value.

Below is my code:

HTML/PHP

<select class="select" id="discount" onchange="discountedGrossTotal()">
<option selected>0</option>
<option value=".02">2</option>
<option value=".03">3</option>
<option value=".04">4</option>
</select> </td>

<input name="txtGrossTotal" type="text" id="txtGrossTotal" size="15" readonly/>

<input name="txtSubTotal" type="text" id="txtSubTotal" size="15" value="<?php $sql=mysqli_query($connection,'select sum(amount) from sales_temp');
$row = mysqli_fetch_array($sql);
echo $row[0]; ?>"/>


Javascript

function discountedGrossTotal(){
var discountOption = document.getElementById("discount"),
subTotal = document.getElementById("txtSubTotal"),
grossTotal = document.getElementById("txtGrossTotal");

discountOption.addEventListener('change', function (e) {
grossTotal.value = subTotal - subTotal * this[this.selectedIndex].value;
});
}


When selects the first option of the drop down, it displays nothing in the
Gross Total
text box. From then, it displays as "NaN" in the text box, whatever option selects.

enter image description here

Appreciate your help on this.

Answer

function discountedGrossTotal(dropdownVal){
 var discountOption = document.getElementById("discount"),
 subTotal = document.getElementById("txtSubTotal"),
 grossTotal = document.getElementById("txtGrossTotal");
 grossTotal.value = subTotal.value - (subTotal.value * dropdownVal);

}
<select class="select" id="discount" onchange="discountedGrossTotal(this.value)">
 <option value="0">0</option>
 <option value=".02">2</option>
 <option value=".03">3</option>
 <option value=".04">4</option>
</select> 

<input name="txtGrossTotal" type="text" id="txtGrossTotal" size="15" value="" readonly/>

<input name="txtSubTotal" type="text" id="txtSubTotal" size="15" value="200"/>