Dropdown is not updating while selecting another value

Question

Hello in my form I have used java script on change event it's working for my textboxes but not working for my dropdown-box, whenever I'm selecting from drop down other

values it must change but it's not working

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>

        <script type="text/javascript">

            function add() 
            {
                var ea   = parseInt(document.TransactionForm.earnamount.value);
                var td   = parseInt(document.TransactionForm.taxdeduction.value);
                var ap   = parseInt(document.TransactionForm.amountpaid.value);
                var arwo = parseInt(document.TransactionForm.amountremainwithoffice.value);
                var result = (ea * td) / 100;
                var result1 = ea-result;
                var result2 = result1 - ap;
                document.TransactionForm.amountpayable.value = result1 ;
                document.TransactionForm.amountremainwithoffice.value = result2 ;

            }

        </script>
        <title>Calculate</title>
    </head>
    <body>

        <form action="#" name="TransactionForm" method="post">
            Earn Amount:<br />
            <input type="number" id="earnamount" name="earnamount" onChange="add()" ><br /><br />

            Tax Deduction:<br />

            <select name="taxdeduction" id="taxdeduction" onchange="add()">

                <option value="2">Two Percent</option>
                <option value="5">Five Percent</option>

            </select>
            <br /><br />

            Amount Payable:<br />
            <input type="number" id="amountpayable" name="amountpayable" ><br /><br />

            Amount Paid:<br />
            <input type="number" id="amountpaid" name="amountpaid" onchange="add()" ><br /><br />

            Amount Remain With Office:<br />
            <input type="number" id="amountremainwithoffice" name="amountremainwithoffice" ><br /><br />
            <input type="submit" value="Submit To Database" />
        </form>

    </body>
</html>

Try with onChange instead of onchange :), on textbox , you have used onChange and on dropdown, you are using onchange (C capital) — Ankit, Jul 15 '14 at 08:32

score 0 · Accepted Answer · answered Jul 15 '14 at 08:40

0

The function name used here, add() is conflicting with the HTMLSelectElement add method - See here. There is a javascript error generated by your code which says--

TypeError: Not enough arguments to HTMLSelectElement.add.

I do not have much details on the error.

Changing the method name to something else will work. See this jsfiddle example

Just change your method name to something else. For eg. change add() to addThis()

answered Jul 15 '14 at 08:40

Ankit

3,083
7
35
59

No problem, other solutions given here will also work. But you should know why it was not working :) – Ankit Jul 15 '14 at 08:54

score 0 · Answer 2 · answered Jul 15 '14 at 08:42

0

You can do something like this

Fiddle: fiddle

<select id="taxdeduction" onchange="myfun()">
<option value="2">Two Percent</option>
<option value="5">Five Percent</option>
</select>

answered Jul 15 '14 at 08:42

Sid M

4,354
4
30
50

score 0 · Answer 3 · edited May 23 '17 at 11:50

0

It should work correctly, have a look here: http://jsfiddle.net/jpkhw/

<script type="text/javascript">
function populateList() {
    alert("Test");
}
</script>

<select onchange="populateList();">
<option>1</option>
<option>2</option>
</select>

Or here: select onclick onchange not working

edited May 23 '17 at 11:50

Community

1
1

answered Jul 15 '14 at 08:44

Yves Lange

3,914
3
21
33

WARNING: add is a function defined by JavaScript. It can be confusing ;) – Yves Lange Jul 15 '14 at 08:46

score 0 · Answer 4 · edited May 23 '17 at 11:50

0

Always register your handlers using javascript , and avoid inline event handling , registering your event handler using JS solves it :-

window.onload =function (){
var p1 = document.getElementById("taxdeduction");
if (p1.addEventListener) {
pl.addEventListener("change", add, false);
} else {
pl.attachEvent('onchange', add);
}
};

Here is you working code - fiddle

Reference for source

edited May 23 '17 at 11:50

Community

1
1

answered Jul 15 '14 at 08:56

Mustafa sabir

4,130
1
19
28

Dropdown is not updating while selecting another value

4 Answers4