Link to home
Start Free TrialLog in
Avatar of Nur
Nur

asked on

Onkeyup for each row of td retrieve from database

I have multiple row of td that i retrieve from database. Now I have to to keyup for each row once i input value into LUAS_KESELURUHAN AND LUAS_KEKOSONGAN textbox. The answer must be display on REMISI textbox.. I have used javascript for this action but it only keyup this action for the first line..can someone here help me since i have stuck for this problem for a few days..Thank you
Problem:


And here is my code:
<script>
function kira1(){
	var LUAS_KESELURUHAN = document.getElementById('LUAS_KESELURUHAN').value;
	var LUAS_KEKOSONGAN = document.getElementById('LUAS_KEKOSONGAN').value;
	
	if (LUAS_KESELURUHAN != "" ){
	remisi = LUAS_KESELURUHAN*LUAS_KEKOSONGAN;
	document.getElementById('REMISI').value = remisi;
	}
}
</script>

while($rowChk = $resultChk->fetch(PDO::FETCH_ASSOC)){
	
		echo "<tr>";
		echo "<form id='makRemisi' method='post'>";
		?>
		<div style="display:none;">
		<?php
		echo "<div id = 'show_idx'>";
		echo "<td>"?><input type="text" name="LUAS_KESELURUHAN" id="LUAS_KESELURUHAN" onkeyup="kira1()" value="<?php print $rowb["LUAS_KESELURUHAN"] ?>"><?php " 
                </td>";
		echo "<td>"?><input type="text" name="LUAS_KEKOSONGAN" id="LUAS_KEKOSONGAN" onkeyup="kira1()" value="<?php print $rowb["LUAS_KEKOSONGAN"] ?>"><?php " 
                </td>";
		echo "<td>"?><input type="text" name="REMISI" id="REMISI" value="<?php print $rowb["REMISI"] ?>"><?php "</td>";
		echo "<td>"?><input class="easyui-filebox" name="fileName[]" id="fileName" style= "width:150px;"><?php "</td>";
		echo "<td>"?><div class="show_id"><a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'"></a></div><?php "</td>";
		echo "</form>";
                echo "</tr>";
		echo "</div>";

Open in new window

Avatar of Swatantra Bhargava
Swatantra Bhargava
Flag of India image

Try below code if it works for you

<script>
function kira1(id){
      var LUAS_KESELURUHAN = document.getElementById('LUAS_KESELURUHAN'+id).value;
      var LUAS_KEKOSONGAN = document.getElementById('LUAS_KEKOSONGAN'+id).value;
      
      if (LUAS_KESELURUHAN != "" ){
      remisi = LUAS_KESELURUHAN*LUAS_KEKOSONGAN;
      document.getElementById('REMISI'+id).value = remisi;
      }
}
</script>
$id=1;
while($rowChk = $resultChk->fetch(PDO::FETCH_ASSOC)){
      
            echo "<tr>";
            echo "<form id='makRemisi' method='post'>";
            ?>
            <div style="display:none;">
            <?php
            echo "<div id = 'show_idx'>";
            echo "<td>"?><input type="text" name="LUAS_KESELURUHAN" id="LUAS_KESELURUHAN<?=$id?>" onkeyup="kira1(<?=$id?>)" value="<?php print $rowb["LUAS_KESELURUHAN"] ?>"><?php " 
                </td>";
            echo "<td>"?><input type="text" name="LUAS_KEKOSONGAN" id="LUAS_KEKOSONGAN<?=$id?>" onkeyup="kira1(<?=$id?>)" value="<?php print $rowb["LUAS_KEKOSONGAN"] ?>"><?php " 
                </td>";
            echo "<td>"?><input type="text" name="REMISI" id="REMISI<?=$id?>" value="<?php print $rowb["REMISI"] ?>"><?php "</td>";
            echo "<td>"?><input class="easyui-filebox" name="fileName[]" id="fileName" style= "width:150px;"><?php "</td>";
            echo "<td>"?><div class="show_id"><a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'"></a></div><?php "</td>";
            echo "</form>";
                echo "</tr>";
            echo "</div>"; 
<?
			$id++; // inside your while loop
			?>

Open in new window

There are a few things you need to fix with your table markup - it is invalid
1. <form> and <div> cannot appear in a table outside of a <tr> <td> .... </td></tr>
2. ID's must be unique - when you are repeating rows you cannot use the same ID

Your function links to the ID of the boxes - and because they are not unique your code will not work.

I modified your Table markup to look like this
<tr>
  <td><input type="text" class="remisi-calc" name="LUAS_KESELURUHAN" value="{$rowb["LUAS_KESELURUHAN"]}"></td>
  <td><input type="text" class="remisi-calc" name="LUAS_KEKOSONGAN" value="{$rowb["LUAS_KEKOSONGAN"]}"></td>
  <td><input type="text" name="REMISI" value="{$rowb["REMISI"]}"></td>
  <td><input class="easyui-filebox" name="fileName[]" style= "width:150px;"></td>
  <td><div class="show_id"><a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'"></a></div></td>
</tr>

Open in new window

Note I have used HEREDOC syntax to make this more readable.
I removed the ID's
I added a class to the first to text boxes so we have something to bind to.
I made the REMISI textbox readonly
Then the JavaScript I changed to use jQuery as it will make this process a lot easier
<script>
$(function() {
  $('input.remisi-calc').change(function() {
    var parent = $(this).closest('tr');
    var total = +parent.find('input[name="LUAS_KESELURUHAN"]').val() * 
            +parent.find('input[name="LUAS_KEKOSONGAN"]').val();
    parent.find($('input[name="REMISI"]')).val(total);
  });
});
</script>

Open in new window

For this to work all you need to do is add the jQuery library

You can see this working here
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.