Text box not changes for default drop down value in javascript

0
votes

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

2
javascripthtml
Please, read this (how to ask) and this (mcve) before asking, as those will help you get more and better answers from the community. Edit your question, and show when/how you are calling the discountedGrossTotal function. It is likely that you have not set it as selection events for the fields – Bonatti
It seems like you are calling discountedGrossTotal() when dropdown value is changed. Call this method even when you enter value to txtSubTotal – Rajashekhar
@Bonatti I added the code. – EKBG

2 Answers

0
votes

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.

0
votes

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>