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

Question

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

Here is my preview image :

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:


        @foreach($branches as $key => $fb)
            
        @endforeach
    
    
    
        Nama Cabang
        Jumlah
        Biaya Operasional
        Tipe Biaya
        Total
    
    
    
                
                    {{ $fb->name }}

Here my JavaScript and 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++;
        });
    });

Thank you so much!

Swati · Accepted Answer

You can get value of jumlah and biaya column using $(this).closest("tr").find.. then simply use .val() to add result inside your total column inputs.

Demo Code :

$(document).ready(function() {
  var count = 0;
  //if you need on chnage of input as well(else remove that input[type=number]..)
  $(document).on("change input", ".operational_cost_type , input[type=number]", function() {
    event.preventDefault();
    var var_operational_cost_type = $(this).val();
    var selector = $(this).closest("tr")
    //get product quantity
    var product_quantity = selector.find('.product_quantity').val();
    var total_operational_cost = selector.find('.total_operational_cost')
    //get opertional cost
    var each_operational_cost = selector.find('.each_operational_cost').val();
    //mutliply and add total to total col
    total_operational_cost.val(product_quantity * each_operational_cost)
  });

});



  
    
      Nama Cabang
      Jumlah
      Biaya Operasional
      Tipe Biaya
      Total
    
  
  

    
      
        something
      
      
        
      
      
        
      
      
        
      
      
        
      
    
    
      
        something1
      
      
        
      
      
        
      
      
        
      
      
        
      
    
    
      
        something2

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

Answers (1)

Related Questions