How To Get The Textbox Value When Dropdown Box Value Changed In Javascript

I am having the table which contains the table like items  price  quantity  total apple    100     2         200 orange  200    2        

Solution 1:

I got the solution for this using table rows length and use that length to my for loop now my code is like

functiontotalprice(element,price)

{

var elementid=element.id;
var expr = elementid.substring(elementid.indexOf(":") + 1, elementid.length);
var quantity = document.getElementById("quantity:"+expr).value;

        var price = document.getElementById("price:" + expr).value; 
        if(quantity >0)
        {
        document.getElementById("total:"+ expr ).value= (parseInt(quantity))*(parseInt(price));           
        //var grandtotal =document.getElementById("total:"+expr).value;//var grandtotal = document.getElementsByClassName("total"+expr);var rowcount = document.getElementById('table').rows.length;

        var grandtotal = 0;
        var finalamount = 0;
            for(var i=1; i<rowcount; i++)
            {
                grandtotal=document.getElementById("total:"+i).value;
                finalamount = parseInt(grandtotal) + parseInt(finalamount);

            }

            document.getElementById("total").value=finalamount;
        }
      returntrue;

}

Solution 2:

Here is code what you need:

Java Script:

<script>functiongetVal(e){
    // for textalert(e.options[e.selectedIndex].innerHTML);
    // for valuealert(e.options[e.selectedIndex].value);
}
</script>

HTML:

<selectname="sel"id="sel"onchange='getVal(this);'><optionvalue="1">Apple</option><optionvalue="2">Banana</option><optionvalue="3">Cat</option></select>

Solution 3:

I see two errors in your for loop, first you forgot to use i in your getElement so you're only going through the same field multiple times, second, you're only looping through the inputs previous to the field that was updated (i<=expr), when you actually want to go through all the "total" fields to get the grand total, I would suggest giving a class to all your total fields and then use this code for your loop

var total_fields = document.getElementsByClassName('total');
for (var i = 0; i < total_fields.length; i++) {
    gtot = total_fields[i].value;
    amount+= parseInt(gtot);
}
document.getElementById("total").value = amount;

Solution 4:

I think the problem relies here:

"My problem is when selecting apple and orange again"

Because I don't see in your code that you are actually updating the elements id when you calculate the total.

So... If you do:

gtot = document.getElementById("total:" + expr).value;

First time will work, because expr var is the original one, then, gtot is the right element idbut... ...when you do a second change, that var has a different value now... and gtot will not match your element id to recalculate the new value. (or in worst case, will match another and update the wrong one)