textbox and numberbox OnChange Sample Code

[karogel]

Please help. I need sample code on how to calculate textbox or numberbox value say onchange value then update the numberbox for the total value:

<tr>
   <td>Expense 1</td>
   <td><input name="Expense1" class="easyui-numberbox" value="Expense1" ></input></td>
</tr>
<tr>
   <td>Expense 2</td>
   <td><input name="Expense2" class="easyui-numberbox" value="Expense2" ></input></td>
</tr>
<tr>
   <td>Expense 3</td>
   <td><input name="Expense3" class="easyui-numberbox" value="Expense3" ></input></td>
</tr>
<tr>
   <td>Total Expense:</td>
   <td><input name="TotalExpense" class="easyui-numberbox" disabled="true" value=TotalExpense" ></input></td>
</tr>

[stworthy]

Please try this:

Code:

<table>
<tr>
   <td>Expense 1</td>
   <td><input name="Expense1" class="nb" value="Expense1" ></input></td>
</tr>
<tr>
   <td>Expense 2</td>
   <td><input name="Expense2" class="nb" value="Expense2" ></input></td>
</tr>
<tr>
   <td>Expense 3</td>
   <td><input name="Expense3" class="nb" value="Expense3" ></input></td>
</tr>
<tr>
   <td>Total Expense:</td>
   <td><input id="TotalExpense" name="TotalExpense" class="easyui-numberbox" disabled="true"></input></td>
</tr>
</table>
<script type="text/javascript">
    $(function(){
        $('.nb').numberbox({
            onChange: function(){
                var total = 0;
                $('.nb').each(function(){
                    total += parseFloat($(this).numberbox('getValue')) || 0;
                });
                $('#TotalExpense').numberbox('setValue', total);
            }
        })
    })
</script>

[karogel]

Sir the onChange is not firing

could this code above my table affects it:

<form id="fm_investigate_maker" method="post" novalidate>

[stworthy]

When the numberbox value changed, the 'onChange' event fires. This event works fine on textbox and all its inherited components.

[karogel]

I did copy and paste your code and it's working sir, Thank You...maybe there's error in my code when I use the sample code:
What I am trying to do know based on your sample code is this Computation:

Prin   = 100,000
Int     = .04
Term  = 4
Face Value = 116,000  (answer)

I tried this non-easyui code and its working aside from the result becomes 115999.99. How could I re-write it in easyui way:

<table>
<tr>
   <td>Principal:</td>
   <td><input name="Prin"></input></td>
</tr>
<tr>
   <td>Interest:</td>
   <td><input name="Int" ></input></td>
</tr>
<tr>
   <td>Term:</td>
   <td><input name="Term" ></input></td>
</tr>
<tr>
   <td>Face Value:</td>
   <td><input name="FaceValue" disabled="true"></input></td>
</tr>
</table>

<script type="text/javascript">
$('input[name="Term"]').keyup(function() {
    var Prin = $('input[name="Prin"]').val();
    var Int = $('input[name="Int"]').val();
    var Term = $('input[name="Term"]').val();
    $('input[name="FaceValue"]').val(
        parseFloat(Prin)*((1+(parseFloat(Int) * parseFloat(Term)))
    ));
});
</script>