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:
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>";
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
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
You can see this working here
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>
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>
For this to work all you need to do is add the jQuery libraryYou can see this working here
This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers 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.
Open in new window