Sum of two jquery values using foreach in php

2

I am stuck with a problem that I have not been able to solve, I am using a form and in the view I have a foreach running through an array. The problem I have is that I need to return the total of the sum between the value-a and value-b and the result in an input sum_total but the value is repeated because I am selecting the class, I tried to place the button that performs the action outside the loop but it has not worked for me. I attach my php and jquery code. I appreciate the help

<?php

//Get work order
$workerItem = "work_id";
$workerValue = $_GET["workId"];

$worker = WorkordersController::ctlWorkShow($workerItem,$workerValue);

//Decode json string
$workersList = json_decode($worker["work_workers"],true);

foreach ($workersList as $key => $value) {

    $item = "user_id";
    $value_2 = $value["id"];

    $response = UsersController::ctlUserShow($item, $value_2);

    echo '<div class="row" style="padding:5px 15px">
            <div class="col-xs-3" style="padding-right: 0px" >
              <div class="input-group">

                <input type="text" style="font-size: 12px" class="form-control newWorkerName"    value="'.($key+1).'" readonly >
            </div>
           </div>
           <div class="col-xs-3" >
               <div class="input-group">
                   <input type="text" style="font-size: 12px" class="form-control valor-a"  value="" >
               </div>
           </div>

           <div class="col-xs-3" >
               <div class="input-group">
                   <input type="text" style="font-size: 12px" class="form-control valor-b"  value="" >
               </div>
           </div>

           <div class="col-xs-3" style="padding-left: 0px">
               <div class="input-group">
                   <input type="text" style="font-size: 12px" class="form-control suma_total" value="" readonly>
               </div>
            </div>
        </div>';
}

echo '<button class="btn btn-success btnCalcular" style="font-size: 11px">Calcular</button>';
?>

$(".btnCalcular").click(function () {

  event.preventDefault();

  var valorA = $(".valor-a").val();

  var valorB = $(".valor-b").val();

  var total = $(".suma_total");

  var suma = Number(valorA)+Number(valorB);

  total.val(suma);

});
    
asked by Carlos Messori 05.01.2019 в 04:33
source

1 answer

1

You must identify the context where each button is, in this way you will be able to select the fields associated with the pressed button and thus be able to add them to obtain the desired result.

I have recreated a functional example of your code trying as much as possible to make the minimum possible changes to achieve the desired result.

$(".btnCalcular").click(function () {

  event.preventDefault();

  var $elm = $(event.target.closest("div"));

  var valorA = $elm.find(".valor-a").val();

  var valorB = $elm.find(".valor-b").val();

  var total = $elm.find(".suma_total");

  var suma = Number(valorA)+Number(valorB);

  total.val(suma);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" style="padding:5px 15px">
 <div class="col-xs-3" style="padding-right: 0px" >
  <div class="input-group">
   <input type="text" style="font-size: 12px" class="form-control newWorkerName"    value="1" readonly >
  </div>
 </div>
 <div class="col-xs-3" >
  <div class="input-group">
   <input type="text" style="font-size: 12px" class="form-control valor-a"  value="" >
  </div>
 </div>
 <div class="col-xs-3" >
  <div class="input-group">
   <input type="text" style="font-size: 12px" class="form-control valor-b"  value="" >
  </div>
 </div>
 <div class="col-xs-3" style="padding-left: 0px">
  <div class="input-group">
   <input type="text" style="font-size: 12px" class="form-control suma_total" value="" readonly>
  </div>
 </div>
 <button class="btn btn-success btnCalcular" style="font-size: 11px">Calcular</button>
</div>

<div class="row" style="padding:5px 15px">
 <div class="col-xs-3" style="padding-right: 0px" >
  <div class="input-group">
   <input type="text" style="font-size: 12px" class="form-control newWorkerName"    value="2" readonly >
  </div>
 </div>
 <div class="col-xs-3" >
  <div class="input-group">
   <input type="text" style="font-size: 12px" class="form-control valor-a"  value="" >
  </div>
 </div>
 <div class="col-xs-3" >
  <div class="input-group">
   <input type="text" style="font-size: 12px" class="form-control valor-b"  value="" >
  </div>
 </div>
 <div class="col-xs-3" style="padding-left: 0px">
  <div class="input-group">
   <input type="text" style="font-size: 12px" class="form-control suma_total" value="" readonly>
  </div>
 </div>
 <button class="btn btn-success btnCalcular" style="font-size: 11px">Calcular</button>
</div>

I hope this serves you;)) ...

And remember to accept (check) the answer that most corresponds to the solution of the problem.

    
answered by 05.01.2019 / 06:54
source