jQuery change other value if main input form is (on.change)

  html, javascript, jquery, laravel, php

im using Laravel and javascript+jQuery. then, what i need is if click the select option value, it will change the other form input based on (count value).

here my preview img :

enter image description here

nah if i click the value of select option in "Tipe Biaya" column, it will count jumlah column*biaya operational column then put the result in total column (in One row).

here my Html code:

<table class="table table-bordered table-responsive-md table-striped text-center">
    <thead>
    <tr>
        <th class="text-center">Nama Cabang</th>
        <th class="text-center">Jumlah</th>
        <th class="text-center">Biaya Operasional</th>
        <th class="text-center">Tipe Biaya</th>
        <th class="text-center">Total</th>
    </tr>
    </thead>
    <tbody  class="distributionList">
        @foreach($branches as $key => $fb)
            <tr>
                <td class="pt-3-half text-left">
                    {{ $fb->name }}
                </td>
                <td class="pt-3-half">
                    <input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="" placeholder="0">
                </td>
                <td class="pt-3-half">
                    <input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="" placeholder="0">
                </td>
                <td class="pt-3-half">
                    <select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
                        <option value="pecentage">Pecentage</option>
                        <option value="flat">Number</option>
                    </select>
                </td>
                <td class="pt-3-half">
                    <input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="" placeholder="0" readonly>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

and here my javascript+jquery

    $(document).ready(function(){
        var count = 0;
        $(".operational_cost_type").each(function() {
            $(this).change(function(){
                event.preventDefault();
                var var_operational_cost_type = $(this).val();
                
                var var_each_operational_cost = $(this).closest('.each_operational_cost');
                var var_total_operational_cost = $(this).find('.total_operational_cost').val();
                
                console.log(var_each_operational_cost);

            });
            count++;
        });
    });

thankyou so much!

Source: Laravel

Leave a Reply