I am using jquery keyup to calculate fees ,the keyup is working fine but the problem is on page load fees are not showing that means it is only works when a key is pressed but i want to calculate fees on page load.Here is my code

HTML:

<tr>
    <td><label for="amount">Amount</label></td>
    <td><div class="input-container"><input name="amount" id="amount"  value="100"  type="text" /></td>
  </tr>



<tr>
    <td><label for="fee">Fee<font color="#CC0000">(5%)</font></label></td>
    <td>$ <span id="fees"> </span>
    </td>


  </tr>

<tr>
    <td><label for="net">Net amount</label></td>
    <td>$<span id="net"></span>
    </td>


  </tr>

Jquery:

$(document).ready(function(){
    $('#amount').on('keyup change', function(){

        $('#fees').text($('#amount').val()*(5/100));

        $('#net').text($('#amount').val() - ($('#amount').val()*5/100));


         });    
});

I am using jquery keyup to calculate fees ,the keyup is working fine but the problem is on page load fees are not showing that means it is only works when a key is pressed but i want to calculate fees on page load.Here is my code

HTML:

<tr>
    <td><label for="amount">Amount</label></td>
    <td><div class="input-container"><input name="amount" id="amount"  value="100"  type="text" /></td>
  </tr>



<tr>
    <td><label for="fee">Fee<font color="#CC0000">(5%)</font></label></td>
    <td>$ <span id="fees"> </span>
    </td>


  </tr>

<tr>
    <td><label for="net">Net amount</label></td>
    <td>$<span id="net"></span>
    </td>


  </tr>

Jquery:

$(document).ready(function(){
    $('#amount').on('keyup change', function(){

        $('#fees').text($('#amount').val()*(5/100));

        $('#net').text($('#amount').val() - ($('#amount').val()*5/100));


         });    
});

• javascript
• jquery
• html

5 Answers 5

You can do something like this

 $(document).ready(function(){

        //calcualte fee on page load
        calculateFee();

        $('#amount').on('keyup change', function(){

            calculateFee();
        }); 

        function calculateFee(){

           $('#fees').text($('#amount').val()*(5/100));
           $('#net').text($('#amount').val() - ($('#amount').val()*5/100));
        }

    });

Just trigger the "keyup" event explicitly.

$('#amount').trigger("keyup");

Thanks

Something like this:

$(document).ready(function(){
    function calculate() {
        $('#fees').text($('#amount').val()*(5/100));
        $('#net').text($('#amount').val() - ($('#amount').val()*5/100));
    }

    $('#amount').on('keyup change', function(){
        calculate();
    });    

   calculate();
});

Move this code into its own function:

function calculate()
{
    $('#fees').text($('#amount').val()*(5/100));
    $('#net').text($('#amount').val() - ($('#amount').val()*5/100));
}

Then do this:

$(document).ready(function()
{

 calculate();
 $('#amount').on('keyup change', function()
 {

      calculate();

     });    
});

So you call the calculate first on document ready then bind to the keyup event;

Try to use this Javascript, you define function, which you will call on page load and then on each 'keyup change' event.

function calculateFees() {
    $('#fees').text($('#amount').val()*(5/100));
    $('#net').text($('#amount').val() - ($('#amount').val()*5/100));
}

$(document).ready(function(){
    calculateFees();
    $('#amount').on('keyup change', calculateFees);  
});