如何添加以HTML格式制作的这些文本框的总和并显示在另一个文本框中？

Question

These are the textboxes the total of which I wish to add:

This is how I've created the boxes:

 <?php
    $sth = $conn->prepare('SELECT employee.name, employee.type, employee.rate, work.overtime, work.leaves, work.ticket FROM employee left join work on employee.name=work.name');
   $sth->execute();
     $data = $sth->fetchAll();   
    foreach ($data as $row ){
        if($row['name']!=""){
    ?>
    <tr>
      <td>
        <input type="text" placeholder="Name" value="<?php echo $row['name']?>"/>
      </td>
      <td>
        <input type="text" placeholder="Type" value="<?php echo $row['type']?>"/>
      </td>
      <td>
        <input type="text" placeholder="Rate" value="<?php echo $row['rate']?>"/>
      </td>
      <td>
        <input type="text" placeholder="OT" value="<?php echo $row['overtime']?>"/>
      </td>
      <td>
        <input type="text" placeholder="Leaves" value="<?php echo $row['leaves']?>"/>
      </td>
      <td>
     <input type="text" placeholder="Total" value="<?php echo $row['rate'] * 30?>"/>
      </td>
    </tr>
    <?php }}?>

Want to add the total to this text box:

  Monthly total<input type="text" placeholder="Monthly total" style="width:200px;"/><br>

How do I do it?

Answer 1

You can store the values in a PHP variable and use that to display the total at the last textbox.
Like this,

<?php
    $sth = $conn->prepare('SELECT employee.name, employee.type, employee.rate, work.overtime, work.leaves, work.ticket FROM employee left join work on employee.name=work.name');
   $sth->execute();
     $data = $sth->fetchAll();
     $totalMonthly=0;   
    foreach ($data as $row ){
        if($row['name']!=""){
    ?>
    <tr>
      <td>
        <input type="text" placeholder="Name" value="<?php echo $row['name']?>"/>
      </td>
      <td>
        <input type="text" placeholder="Type" value="<?php echo $row['type']?>"/>
      </td>
      <td>
        <input type="text" placeholder="Rate" value="<?php echo $row['rate']?>"/>
      </td>
      <td>
        <input type="text" placeholder="OT" value="<?php echo $row['overtime']?>"/>
      </td>
      <td>
        <input type="text" placeholder="Leaves" value="<?php echo $row['leaves']?>"/>
      </td>
      <td>
     <input type="text" placeholder="Total" value="<?php echo $row['rate'] * 30?>"/>
      </td>
    </tr>

    <?php 
         $totalMonthly+=($row['rate']*30); // ***Change this formula according to your requirements.
    }}?>

Monthly total:

<input value="<?php echo $totalMonthly; ?>" type="text" placeholder="Monthly total" style="width:200px;" />

Answer 2

you can do this with the help of javascript-

function findTotal(){
    var arr = document.getElementsByClassName('amt');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementById('ptotalamt').value = tot;
}

and here is the html-

Vat Amount:<input type="text" onblur="findTotal()" name="p_vatamt" class="amt" /><br />
 Service Tax:<input type="text" onblur="findTotal()"  name="p_servicetax" class="amt" /><br />
 Transportation Tax:<input type="text" onblur="findTotal()" name="p_transporttax" class="amt" /><br />
 Labour Charges:<input type="text" onblur="findTotal()" name="p_labour" class="amt" /><br />
 Other Charges:<input type="text" onblur="findTotal()" name="p_othercharges" class="amt" /><br />
 <HR />
 Total Amount:<input type="text" name="p_totalamt" id="ptotalamt" readonly /><br />