Print Page - textbox and numberbox OnChange Sample Code

Title: textbox and numberbox OnChange Sample Code
Post by: karogel on October 12, 2015, 02:05:36 AM

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>

Title: Re: textbox and numberbox OnChange Sample Code
Post by: stworthy on October 12, 2015, 08:23:26 PM

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>

Title: Re: textbox and numberbox OnChange Sample Code
Post by: karogel on October 12, 2015, 08:41:23 PM

Sir the onChange is not firing

could this code above my table affects it:

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

Title: Re: textbox and numberbox OnChange Sample Code
Post by: stworthy on October 12, 2015, 11:48:09 PM

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

Title: Re: textbox and numberbox OnChange Sample Code
Post by: karogel on October 13, 2015, 01:59:49 AM

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>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: karogel on October 12, 2015, 02:05:36 AM