How to display calculation of html table on another column

user_7746976 0
Viewed 748

I have 3 columns, one column total_column_price uses to display the calculation result of amount and device_price. How to achieve that?

The Table

{{ Form::open(['action' => 'TransactionsINController@store', 'method' => 'POST']) }}

<table class="table table-hover table-bordered">
    <thead align="center">
        <tr>
            <th>Amount</th>
            <th>Device Price</th>
            <th><a href="#" class="btn btn-primary btn-sm addRow">
                    <i class="fa fa-plus"></i>
                </a>
            </th>
            <th>Column Total Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="form-group">
                    {{ Form::number('amount[]', 'value', ['name' => 'amount[]']) }}
                </div>
            </td>
            <td>
                <div class="form-group">
                    {{ Form::number('device_price[]', 'value', ['name' => 'device_price[]']) }}
                </div>
            </td>
            <td align="center">
                <a href="#" class="btn btn-danger btn-sm remove">
                    <i class="fa fa-times"></i>
                </a>
            </td>
            <td>
                {{ Form::text('total_column_price', '') }}
            </td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>Total: </td>
            <td style="border: none"><b class="total_price"></b></td>
            <td style="border: none"></td>
        </tr>
    </tfoot>
</table>

{{ Form::button('<i class="far fa-save"></i> Submit', ['type' => 'submit', 'class' => 'btn btn-info'] )  }}
{{ Form::close() }}

This is the calculation I try to use. the purpose is when I make input in amount and device_price column the result will automatically appear in total_column_price.

The Script to Calculate

<script type="text/javascript">
        $('tbody').delegate('.amount,.device_price','keyup',function(){
            var tr=$(this).parent().parent();
            var amount=tr.find('.amount').val();
            var device_price=tr.find('.device_price').val();
            var total_column_price=(amount*device_price);
            tr.find(.total_column_price).val(total_column_price);
            total_price();
        });
        function total_price(){
            var total_price=0;
            $('.total_column_price').each(function(i,e){
                var total_column_price=$(this).val()-0;
            total_price +=total_column_price;
        });
            $('.total_price').html(total_price+",00");
        }
</script>
laravel css html jquery javascript
1 Answers

Everything seems to be good in your code the problem is way you are using the JQuery find function, you need to add quotes while entering the selector.

 tr.find('.total_column_price').val(total_column_price);

Use the new event handle .on() The .on() syntax is the new syntax that version 1.7 uses and it is meant to substitute .bind(), .delegate() and .live().

Another problem in your javascript was related to fetching the parent from on keyup in input box. It should be like this 

var tr = $(this).parent().parent().parent();

Try the code below:

 $(function() {

  $(document).on('keyup', 'input[name="amount[]"],input[name="device_price[]"]', function() {
    var tr = $(this).parent().parent().parent();
    var amount = tr.find('input[name="amount[]"]').val();
    var device_price = tr.find('input[name="device_price[]"]').val();
    var total_column_price = (amount * device_price);
    total_price();
  });

  function total_price() {
    var total_price = 0;
    $('input[name="total_column_price[]"]').each(function(i, e) {
      var total_column_price = $(this).val() - 0;
      total_price += total_column_price;
    });
    $('.total_price').html(total_price + ",00");
  }


})
user_117334660
Related