使用jquery添加每个水平和垂直形式输入的值

Question

I have index.php file which have some PHP code to call data from MySQL database.

These data will be shown in a form like this.

My Question

I want to plus the values of each row and insert it in Balance input of each row.

like: 1 | 3 | 5 | 6 | Balance = 15

and add value of each column and insert it in Total input of each column like:

5

6

4

3

Total 18

Please see this image for more information.

I developed this jquery code but it is working correctly

<script>
$(function () { 
  $('input[name="Budget[]"],input[name="Availed_in_Regions[]"]').on("change",function (){
    var $container = $(this).closest('.form-group');
      qty = Number($('input[name="Budget[]"]',$container).val())||0,
      price = Number($('input[name="Availed_in_Regions[]"]',$container).val())||0;

    $('input[name="Balance[]"]',$container).val(qty * price);

  })

});
</script>

This is my index.php file

<?php
$con=mysqli_connect("127.0.0.1","root","","dji001");
$result = mysqli_query($con,"SELECT * FROM finance")
or die("Error: ".mysqli_error($con));


echo "<form style='width:1100px; backgrond-color:transparent;' action='update.php' method='post' class='form-group'>";

while($row = mysqli_fetch_array($result))
{  
    $Budget = $row['Budget'];
    $Availed_in_Regions = $row['Availed_in_Regions'];
    $Requested_in_KBL = $row['Requested_in_KBL'];
    $Received_in_KBL = $row['Received_in_KBL'];
    $Availed_in_KBL = $row['Availed_in_KBL'];
    $Balance = $row['Balance'];

 echo "<input type='hidden' name='id[]' value='".$row['ID']."'>

    <input type='text'  name='Budget[]' value='".$row['Budget']."'>

    <input type='text' name='Availed_in_Regions[]' value='".$row['Availed_in_Regions']."'>

    <input type='text' name='Requested_in_KBL[]' value='".$row['Requested_in_KBL']."'>

    <input type='text' name='Received_in_KBL[]' value='".$row['Received_in_KBL']."'>

    <input type='text' name='Availed_in_KBL[]' value='".$row['Availed_in_KBL']."'>

    <input type='text' name='Balance[]' value='".$row['Balance']."'>";
}

echo "<input type='Submit' value='Submit'></form>";

?>

And this is my update.php file

   <?php
    mysql_connect('127.0.0.1', 'root', '') or die(mysql_error());
    mysql_select_db("dji001") or die(mysql_error());

$ud_id = $_POST['id'];
$ud_Budget = array_map('mysql_real_escape_string', $_POST['Budget']);
$ud_Availed_in_Regions = array_map('mysql_real_escape_string',$_POST["Availed_in_Regions"]);
$ud_Requested_in_KBL = $_POST["Requested_in_KBL"];
$ud_Received_in_KBL = $_POST["Received_in_KBL"];
$ud_Availed_in_KBL = $_POST["Availed_in_KBL"];
$ud_Balance = $_POST["Balance"];

foreach($ud_id as $key => $value){
    $query = "UPDATE finance 
    SET 

    Budget = '$ud_Budget[$key]', 
    Availed_in_Regions = '$ud_Availed_in_Regions[$key]', 
    Requested_in_KBL = '$ud_Requested_in_KBL[$key]', 
    Received_in_KBL = '$ud_Received_in_KBL[$key]',
    Availed_in_KBL = '$ud_Availed_in_KBL[$key]', 
    Balance = '$ud_Balance[$key]'

    where ID = $value";
    mysql_query($query)or die(mysql_error());
   if(mysql_affected_rows()>=0){
      echo "<p>Record Updated<p>";
   }else{
      echo "<p>Not Updated<p>";
   }
}
?>

Answer 1

• You should add a container tag around the INPUT elements and also add a class to each of them.

  echo "<div class='calc_container'> 
  
  <input type='hidden' class='id' name='id[]' value='".$row['ID']."'>
  
  <input type='text' class='budget' name='Budget[]' value='".$row['Budget']."'>
  
  <input type='text' class='avail_region' name='Availed_in_Regions[]' value='".$row['Availed_in_Regions']."'>
  
  <input type='text' class='req_kbl' name='Requested_in_KBL[]' value='".$row['Requested_in_KBL']."'>
  
  <input type='text' class='rec_kbl' name='Received_in_KBL[]' value='".$row['Received_in_KBL']."'>
  
  <input type='text' class='avail_kbl' name='Availed_in_KBL[]' value='".$row['Availed_in_KBL']."'>
  
  <input type='text' class='balance' name='Balance[]' value='".$row['Balance']."'>
  
  </div>";
  

• Then using jQuery and on the change event of the input text elements do a calculation.

  jQuery('.id, .budget, .avail_region, .req_kbl, .rec_kbl, .avail_kbl').change(function(){
        var all_inputs = jQuery(this).parent('.calc_container').find("input[class!='balance']");
        var total = 0;
        jQuery.each( all_inputs, function(value){
              total += parseInt( jQuery(value).text(), 10 );
        });
        jQuery(this).parent('.calc_container').find("input.balance").text(total);
  });
  

This code lacks some number validations but should work as needed by you.