how to add array values in text box

Question

I have three text box that given as an array, I want to add two text box and get a result in the third text box as shown in below.

<tbody>
   <?php 
     $i=1;
     foreach ($sub as $row) 
     {
   ?>
<tr>
<td><?php echo $i++;?>
</td>
<td>  <div><span style="border: none;"><input type="text" name="subject[]" class="textbox" value="<?php echo $row->subject_name;?>"></span></div></td>
<td><input type="text" name="mark-1[]" value="" id="mark1"></td>
<td><input type="text" name="mark-2[]" value="" id="mark2"></td>
<td><input type="text" name="total-mark[]" value="" id="totmark"  onclick="add_number()"></td>
</tr>
<?php  }  ?>
<tr>
<th colspan="4">Total Mark</th>
<td></td></tr>
</tbody>

i have used the below script and its running but getting a result in the first loop

 <script type="text/javascript">
function add_number() {
var first_number = parseInt(document.getElementById("mark1").value);
var second_number = parseInt(document.getElementById("mark2").value);
var result = first_number + second_number;
document.getElementById("totmark").value = result;
 }
</script>

please help us get an answer

Answer 1

The problem is the repeated IDs for each iteration, mark1, mar2, mark1, mark2, and so on. The function getElementById is returning the first element.

An alternative is to use the function closest('tr') and then find by name [name="mark-1[]"] and [name="mark-2[]"] . Then find the field to store the result using this .querySelector('[name="total-mark[]"]') .

Finally, using the function addEventListener you can bind the event click to the whole set of elements [name="total-mark[]"] .

 document.querySelectorAll('[name="total-mark[]"]').forEach(function(elem) { elem.addEventListener('click', add_number); }); function add_number() { var tr = this.closest('tr'); var first_number = tr.querySelector('[name="mark-1[]"]').value; var second_number = tr.querySelector('[name="mark-2[]"]').value; var result = Number(first_number) + Number(second_number); this.value = result; } 

 <table> <tbody> <tr> <td><input type="text" name="mark-1[]" value="" ></td> <td><input type="text" name="mark-2[]" value="" ></td> <td><input type="text" name="total-mark[]" value="" placeholder='click to totalize'></td> </tr> <tr> <td><input type="text" name="mark-1[]" value="" ></td> <td><input type="text" name="mark-2[]" value="" ></td> <td><input type="text" name="total-mark[]" value="" placeholder='click to totalize'></td> </tr> </tbody> </table> 

A recommendation is using the current index from the PHP variable $i and add specific IDs to every field, that way you will be able to get the elements directly. For example, the two fields would have these IDs: mark-1-1[] , mark-1-2[] and mark-2-1[] , mark-2-2[] , and so on.

This approach uses the attribute dataset .

 document.querySelectorAll('[name="total-mark[]"]').forEach(function(elem) { elem.addEventListener('click', add_number); }); function add_number() { var field = this.dataset.field; var first_number = document.getElementById('mark-1-' + field + '[]').value; var second_number = document.getElementById('mark-2-' + field + '[]').value; var result = Number(first_number) + Number(second_number); this.value = result; } 

 <table> <tbody> <tr> <td><input type="text" id="mark-1-1[]" value="" ></td> <td><input type="text" id="mark-2-1[]" value="" ></td> <td><input type="text" data-field='1' name="total-mark[]" value="" placeholder='click to totalize'></td> </tr> <tr> <td><input type="text" id="mark-1-2[]" value="" ></td> <td><input type="text" id="mark-2-2[]" value="" ></td> <td><input type="text" data-field='2' name="total-mark[]" value="" placeholder='click to totalize'></td> </tr> </tbody> </table> 

Answer 2

html

<tbody>
   <?php 
     $i=1;
$k=1;
     foreach ($sub as $row) 
     { $k++;
   ?>
<tr>
<td><?php echo $i++;?>
</td>
<td>  <div><span style="border: none;"><input type="text" name="subject[]" class="textbox" value="<?php echo $row->subject_name;?>"></span></div></td>
<td><input type="text" name="mark-1[]" value="" id="mark1-<?php echo $k;?>"></td>
<td><input type="text" name="mark-2[]" value="" id="mark2-<?php echo $k;?>"></td>
<td><input type="text" name="total-mark[]" value="" id="totmark-<?php echo $k;?>"  onclick="add_number(<?php echo $k;?>)"></td>
</tr>
<?php  }  ?>
<tr>
<th colspan="4">Total Mark</th>
<td></td></tr>
</tbody>

Script

   <script type="text/javascript">
function add_number(k) {
var first_number = parseInt(document.getElementById("mark1-"+k).value);
var second_number = parseInt(document.getElementById("mark2-"+k).value);
var result = first_number + second_number;
document.getElementById("totmark-"+k).value = result;
 }
</script>