CODEWITHSUNDEEP
javascripthtml
EKBG
EKBG

Reputation: 253

Text box not changes for default drop down value in javascript

I have a txtSubTotal text box, a discount drop down and a txtGrossTotal text box. txtSubTotal text box is updating when the ADD button is clicked. txtGrossTotal text box is updating when the drop down value is selected. But, when updating the txtSubTotal text box, at the same time txtGrossTotal text box should be updated for the default drop down value, which is "0". Here, txtGrossTotal should be the value of txtSubTotal.

Below is my code, it doesn't display the txtGrossTotal when the drop down has it's default value. (But, after selecting another option, and again select the default value, it updates the txtGrossTotal.)

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

grossTotal.value = subTotal.value - (subTotal.value * dropdownVal/100);}

discount drop down

<select class="select" id="discount" name="discount" onchange="discountedGrossTotal(this.value);">
<option selected>0</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

txtGrossTotal HTML

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

enter image description here

Upvotes: 0

Views: 542

Answers (2)

Bhanu Pratap
Bhanu Pratap

Reputation: 1761

Please Try this, it should work for you...

        function discountedGrossTotal() {
            var dropdownVal= document.getElementById("discount").options[document.getElementById("discount").selectedIndex].innerHTML;
            subTotal = document.getElementById("txtSubTotal");
            grossTotal = document.getElementById("txtGrossTotal").value;
            document.getElementById("txtGrossTotal").value = subTotal.value - (subTotal.value * dropdownVal / 100);
        }
 
  sub total:   <input type="text" id="txtSubTotal" onblur="discountedGrossTotal()" />
    <br />

    discount:  <select class="select" id="discount" name="discount" onchange="discountedGrossTotal();">
        <option selected>0</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <br />
    <div id="gross_total_div">
        <input name="txtGrossTotal" type="text" id="txtGrossTotal" size="15" readonly />
    </div>

Upvotes: 0

wanjarisushil
wanjarisushil

Reputation: 87

Basically you want to take the same action by changing the "discount" dropdown value as well as the "subtotal" textbox value. So, you will have to call the same function on both.

You can achieve this by doing below modifications in your code:

  1. Remove the parameters from "discountedGrossTotal" function
  2. Add a new variable inside your function like dropdownVal = document.getElementById("discount").value
  3. Call the same function on change event of your "txtSubTotal" textbox

Now, this function will be called if any of these (textbox or dropdown) value is changed and hence the "Gross Total" value will be updated accordingly.

Upvotes: 0

Related Questions