We Keep Coding

How to get dynamic values by selection (mysql database) in multiple table rows

I have created an invoice table in which rows are created by pressing 'Add' button. In addition, items price are being displayed into first row of the input value by selection. Everything is fine but when I come to the second row by pressing Add row, price value isn't working by pressing selection.
Here is the table code:
<div class="box pattern pattern-sandstone">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Item</th>
<th>Description</th>
<th>Price</th>
<th>Qty</th>
<th>Total</th>
</tr>
</thead>
<tbody id="customFields">
<tr>
<td> 1 </td>
<td>
<?php include "db_conn.php";
$query_order_to = "SELECT * from gs_items ORDER BY item_name ASC";
$result_order_to = $conn->query($query_order_to); ?>
<select name="selected_item" id="selected_item" onchange="myItemPrice()" data-placeholder="Item Name" >
<option value="">Select Item</option>
<?php
while($rows=mysqli_fetch_assoc($result_order_to))
{ ?>
<option data-price='<?php echo $rows['price']; ?>' value='<?php echo $rows['Id']; ?>'> <?php echo $rows['item_name']; ?></option>
";
<?php } ?>
</select>
</td>
<td><textarea style="min-width: 90%;"></textarea></td>
<td> <input type="text" name="getprice" style="font-size: 12px; color: #333333;" id="getprice" disabled></td>
<td><input type="number" ></td>
<td><input type="number" ></td>
<td><button onclick="addRow();">Add</button></td>
</tr>
</tbody>
</table>
</div>
Here is Javascript + PHP:
<script>
function findAddress(){
var address = $('#select_data').find(':selected').data('address');
$('#getcustomeraddress').val(address);
}
</script>
<script>
function myItemPrice(){
var price = $('#selected_item').find(':selected').data('price');
$('#getprice').val(price);
}
</script>
<?php
$conn = mysqli_connect('localhost','root','','gs');
function fill_unit_select_box($conn)
{ $query_item = "SELECT * from gs_items ORDER BY item_name ASC";
$result_item = $conn->query($query_item);
$x = 1;
foreach($result_item as $rows)
{ echo '<option data-prices'.$x++.'="'.$rows['price'].'" value="'.$rows['Id'].'">'.$rows['item_name'].'</option>';
}
} ?>
<script>
function addRow()
{ var table = document.getElementById("customFields");
var i = 1;
while (i <= table.rows.length) {
i++;
}
var html = '';
html += '<tr>';
html += '<td >'+i+'</td>';
html += '<td><select name="selected_items'+i+'" id="selected_items'+i+'" onchange="myItemPrices()" data-placeholder="Item Name" ><option value="">Select Item</option>';
html += ' <?php echo fill_unit_select_box($conn); ?>
</select></td>';
html += '<td > <textarea style="min-width: 90%;"></textarea></td>';
html +='<td > <input type="number" name="getprices'+i+'" style="font-size: 12px; color: #333333;" id="getprices'+i+'" ></td>';
html +='<td ><input type="number" ></td>';
html +='<td ><input type="number" ></td>';
html +='<td><button onclick="remove();">Remove</button></td>';
html +='</tr>';
$('#customFields').append(html);
}
function myItemPrices(){
var prices = $('#selected_items'+i+'').find(':selected').data('prices'+i+'');
$('#getprices'+i+'').val(prices); }
</script>

I have fixed a number of bugs in your original codes
The $x++ is not necessary for the function fill_unit_select_box($conn)
You should pass the i to the javascript myItemPrices function, for example as var1 (so will be myItemPrices(var1)):
Please find below a fully working one:
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<div class="box pattern pattern-sandstone">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Item</th><th>Description</th><th>Price</th><th>Qty</th><th>Total</th>
</tr></thead>
<tbody id="customFields">
<tr>
<td>1</td><td >
<?php
$conn = mysqli_connect('localhost','dbuser','dbpass','dbname');
$query_order_to = "SELECT * from gs_items ORDER BY item_name ASC";
$result_order_to = $conn->query($query_order_to); ?>
<select name="selected_item" id="selected_item" onchange="myItemPrice()" data-placeholder="Item Name" >
<option value="">Select Item</option>
<?php
while($rows=mysqli_fetch_assoc($result_order_to))
{ ?> <option data-price='<?php echo $rows['price']; ?>' value='<?php echo $rows['Id']; ?>'> <?php echo $rows['item_name']; ?></option>";
<?php } ?> </select> </td>
<td ><textarea style="min-width: 90%;"></textarea></td>
<td ><input type="text" name="getprice" style="font-size: 12px; color: #333333;" id="getprice" disabled></td>
<td ><input type="number" ></td>
<td ><input type="number" ></td>
<td><button onclick="addRow();">Add</button></td>
</tr>
</tbody>
</table>
</div>
<script>
function findAddress(){
var address = $('#select_data').find(':selected').data('address');
$('#getcustomeraddress').val(address);
}
</script>
<script>
function myItemPrice(){
var price = $('#selected_item').find(':selected').data('price');
$('#getprice').val(price);
}
</script>
<?php
$conn = mysqli_connect('localhost','dbuser','dbpass','dbname');
function fill_unit_select_box($conn)
{
$query_item = "SELECT * from gs_items ORDER BY item_name ASC";
$result_item = $conn->query($query_item);
$x = 1;
foreach($result_item as $rows)
{ echo '<option data-prices="'.$rows['price'].'" value="'.$rows['Id'].'">'.$rows['item_name'].'</option>';
}
} ?>
<script>
function addRow()
{ var table = document.getElementById("customFields");
var i = 0;
while (i <= table.rows.length) {
i++;
}
i=i-1;
var html = '';
html += '<tr>';
html += '<td >'+i+'</td>';
html += '<td><select name="selected_items'+i+'" id="selected_items'+i+'" onchange="myItemPrices(' + i +')" data-placeholder="Item Name" ><option value="">Select Item</option>';
html += ' <?php echo fill_unit_select_box($conn); ?>
</select></td>';
html += '<td > <textarea style="min-width: 90%;"></textarea></td>';
html +='<td ><input type="text" disabled name="getprices'+i+'" style="font-size: 12px; color: #333333;" id="getprices'+i+'" ></td>';
html +='<td ><input type="number" ></td>';
html +='<td ><input type="number" ></td>';
html +='<td><button onclick="remove();">Remove</button></td>';
html +='</tr>';
$('#customFields').append(html);
}
function myItemPrices(var1){
i=var1;
var prices = $('#selected_items'+i+'').find(':selected').data('prices');
$('#getprices'+i+'').val(prices); }
</script>

How to check array value for NaN using jQuery each function?

I have these HTML code that fetch data from database. I set an array to HTML input.
Html code
<table>
<thead>
<tr>
<th>Category</th>
<th>January</th>
<th>February</th>
</tr>
</thead>
<tbody>
<?php
$sql = DB::getInstance()->FetchArray("select * from table");
if(count($sql) > 0)
{
foreach($sql as $row)
{
$i = 0;
if($i == 0)
{?>
<tr>
<td><input type="text" class="cat1" id="cat1" name="cat1[]" value="<?php echo $row['CATEGORY']; ?>" placeholder="" readonly></td>
<td><input type="text" class="jan1" id="jan1" name="jan1[]" value="<?php echo (($row['MONTH']=='JANUARY')? $row['TOTAL']:''); ?>" placeholder="" readonly></td>
<td><input type="text" class="feb1" id="feb1" name="feb1[]" value="<?php echo (($row['MONTH']=='FEBRUARY')? $row['TOTAL']:''); ?>" placeholder="" readonly></td>
</tr>
<?php
}
else
{?>
<tr>
<td></td>
<td><input type="text" class="jan1" id="jan1" name="jan1[]" value="<?php echo (($row['MONTH']=='JANUARY')? $row['TOTAL']:''); ?>" placeholder="" readonly></td>
<td><input type="text" class="feb1" id="feb1" name="feb1[]" value="<?php echo (($row['MONTH']=='FEBRUARY')? $row['TOTAL']:''); ?>" placeholder="" readonly></td>
</tr>
<?php
}
$i++;
}
?>
<tr>
<td colspan="2" style="text-align:right;">Total</td>
<td><input type="text" class="form-control inputnumberwith2decimals total_jan1" id="total_jan1" name="" value="" placeholder="" readonly></td>
<td><input type="text" class="form-control inputnumberwith2decimals total_feb1" id="total_feb1" name="" value="" placeholder="" readonly></td>
</tr>
</tbody>
</table>
The value for jan1[] display in console.log as
NaN
1000
3000
NaN
When i try to sum the total for jan1[], the output show as NaN because some of the array value is NaN. How can I set NaN value to 0 and do the sum calculation ?
What I want to achieve is to sum up the value like below
CATEGORY JANUARY FEBRUARY
BANANA NaN NaN
1000 NaN
2000 NaN
NaN NaN
TOTAL 3000 0
Here's the code for jQuery.
<script>
$(document).ready(function(){
var sum_jan1 = parseFloat(0);
$(".jan1").each(function(){
var value = parseFloat($(this).val());
sum_jan1 += value;
});
$('#total_jan1').val(sum_jan1);
});
</script>
Thanks.

You just need to convert the NaN values to 0 in your sum function. Following is an example using reduce:
const arr = [NaN, 1000, 3000, NaN];
const sum = arr.reduce((acc, num) => acc += num || 0, 0);
console.log(sum);
// 4000

Try this
<script>
$(document).ready(function(){
var sum_jan1 = parseFloat(0);
$(".jan1").each(function(){
var value = parseFloat($(this).val());
sum_jan1 += value?value:0;
});
$('#total_jan1').val(sum_jan1);
});

just replace var value = parseFloat($(this).val());
to
var value = $(this).val() ? $(this).val() : 0; line.
This will solve your issue.

Add tax to grandtotal based on checkbox with javascript php

I have a transaction form that could use tax or no tax if the transaction use tax than the user click the checkbox and it will give a value to taxes textbox (besides the checkbox)
And calculate/sum subtotal + taxes = grandtotal
the tax is fix 10% of subtotal
here is my code
<?php
$con = mysqli_connect('localhost', 'root', '', 'a.karat');
if(isset($_POST['product_id']))
{
$prno=$_POST['prno'];
$i=1;
$sql = mysqli_query($con,"select * from detail_pr where prNo='$prno'");
while ($r = mysqli_fetch_array($sql)) {
echo
'<tr>
<td><input type="checkbox" name="check[]" id="check'.$i.'" value="'.$i.'"></td>
<td><label for="productCode"></label>
<input type="text" name="productCode'.$i.'" id="productCode'.$i.'" readonly value="'.$r["productCode"].'" size="12" ></td>
<td><label for="productName"></label>
<input type="text" name="productName'.$i.'" id="productName'.$i.'" readonly value="'.$r["productName"].'"size="35" ></td>
<td><label for="qty"></label>
<input type="number" onkeyup="calc(this);" name="qty'.$i.'" id="qty'.$i.'" readonly value="'.$r["qty"].'" size="10" ></td>
<td><input type="number" onkeyup="calc(this);" name="price'.$i.'" id="price'.$i.'" size="10" min="1" max="99" onchange="calc(this);" ></td>
<td><input type="number" onkeyup="calc(this);" name="discount'.$i.'" id="discount'.$i.'" size="10" min="0" max="99" onchange="calc(this);"></td>
<td><input type="number" name="total'.$i.'" id="total'.$i.'" size="15" min="1" max="99" onchange="calc(this);" ></td>
</tr>';
$i++;
}
}
?>
<form name="form1" id="form1 >
<table width="400" border="0" align="right">
<tr>
<th scope="row">Sub Total</th>
<td>:</td>
<td><input name="subtotal" id="subtotal" type="text" onFocus="startCalc();" onBlur="stopCalc();"></td>
</tr>
<tr>
<th scope="row">tax 10% <input name="tax" id="tax" type="checkbox" value="10" ></th>
<td>:</td>
<td><input name="taxes" id="tax1" type="taxes"></td>
</tr>
<tr>
<th scope="row">Grand Total</th>
<td>:</td>
<td><input name="grandtotal" id="grandtotal" type="text"></td>
</tr>
</table>
</form>
<script>
function calc(id) {
var row = id.parentNode.parentNode;
var quant = row.cells[3].getElementsByTagName('input')[0].value;
var price = row.cells[4].getElementsByTagName('input')[0].value;
var disc = row.cells[5].getElementsByTagName('input')[0].value;
if (disc == null || disc == '') {
res = parseFloat(quant) * parseFloat(price);
} else {
var res = (parseFloat(quant) * parseFloat(price)) - (parseFloat(quant) * parseFloat(price) * (parseFloat(disc) / 100));
}
row.cells[6].getElementsByTagName('input')[0].value = res;
}
</script>
<script>
document.querySelector('#form1').addEventListener('change', function( event ) {
if (event.target.id && event.target.id !== 'subtotal') {
var allTotals = document.querySelectorAll('input[name^="total"]'),
allTotalSum = 0;
Array.prototype.forEach.call(allTotals, function( element ) {
if (element.value) { allTotalSum += parseFloat(element.value); }
});
document.querySelector('#subtotal').value = allTotalSum;
}
});
how to calculate subtotal + taxes = grandtotal?

thanks for the respond
i finally found my answer
<script>
var tax = document.getElementsByName('tax')[0];
var taxes = document.getElementsByName('taxes')[0];
var subtotal = document.getElementsByName('subtotal')[0];
var grandtotal = document.getElementsByName('grandtotal')[0];
function updateInput() {
taxes.value = subtotal.value * (tax.value / 100);
var sum = (parseInt(subtotal.value) + parseInt(taxes.value)) ;
grandtotal.value = sum.toFixed(0);
}
subtotal.addEventListener('change', updateInput);
tax.addEventListener('change', updateInput);
taxes.addEventListener('change', updateInput);
taxes.addEventListener('keyup', updateInput);
</script>

For loop not working right

I would like to run a for loop that will insert a word in a text box from a table; then insert a new word in a text box right after that.
However i only get one word when i click submit is there a way to do this without ajax?
function check()
{
var myrows = new Array();
myrows[0] = "row1";
myrows[1] = "row2";
var server =" ";
var root = " ";
for (var i=0;i<myrows.length;i++){
root = myrows[i]+ "rootname";
server = myrows[i]+ "servername";
var j = document.getElementById(root);
var y = document.getElementById(server);
document.getElementById('id_rootname').value=j.textContent;
document.getElementById('id_servername').value=y.textContent;
}
var x;
var r=confirm("Are you sure you?" );
if (r==true)
{
x="You pressed OK!";
}
else
{
Object.cancel;
}
}
</script>
<tr >
<td align="center"><input type="checkbox" class="selectedId"
onclick="resetSelectedAll(this);" id= "check" value="row1" name="row{{ forloop.counter }" ></td>
<td name = "root" id="row1rootname">appBOWSERtest033</td>
<td style="display:none;" name = "server" id="row1servername">Bowser</td>
<td name= "url" id="row1urls">21</td>
<td id="row1custs">3</td>
<td id="row1jvmms"> 1024</td>
<td id="row1x64">1</td>
<td id="row1currentplatform"> platform_11.3.111129.38873</td>
<td id="row1currentjdk"> jdk_1.6.0_26-b03</td>
<td id="row1currenttomcat">tomcat_6.0.32</td>
</tr>
<tr >
<td align="center"><input type="checkbox" class="selectedId"
onclick="resetSelectedAll(this);" id= "check" value="row2" name="row{{ forloop.counter }" ></td>
<td name = "root" id="row2rootname">appLUIGItest033</td>
<td style="display:none;" name = "server" id="row2servername">LUIGI</td>
<td name= "url" id="row2urls">12</td>
<td id="row2custs">3</td>
<td id="row2jvmms"> 1024</td>
<td id="row2x64">0</td>
<td id="row2currentplatform"> platform_12.1.120510.42747</td>
<td id="row2currentjdk"> jdk_1.6.0_31-b04</td>
<td id="row2currenttomcat">tomcat_7.0.27</td>
</tr>
<form action=" " id ="forms" name = "forms" >{% csrf_token %}
<table>
<tr><th><label for="id_servername">Servername:</label></th><td><input id="id_servername" maxlength="50" name="servername" type="text" value="LUIGI" /></td></tr>
<tr><th><label for="id_rootname">Rootname:</label></th><td><input id="id_rootname" maxlength="50" name="rootname" type="text" value="appLUIGItest033" /></td></tr>
<tr><th><label for="id_action">Action:</label></th><td><select id="id_action" name="action">
<option value="Restart" selected="selected">Restart</option>
<option value="Full_Dump">Full_Dump</option>
<option value="Redeploy">Redeploy</option>
<option value="Thread">Thread</option>
</select></td></tr>
<tr><th><label for="id_loginname">Loginname:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input id="id_loginname" maxlength="50" name="loginname" type="text" /></td></tr>
<tr><th><label for="id_choice">Choice:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input id="id_choice" name="choice" type="checkbox" /></td></tr>
</table>
<input name = "hello" type="submit" onclick="check()" value="Submit">
</form>

root = myrows[i]+ "rootname";
server = myrows[i]+ "servername";
var j = document.getElementById(root);
var y = document.getElementById(server);
instead of this try this one.
start var i = 1 in for loop.
var j= document.getElementById("row"+i+"rootname");

How can I save all retrieved records from database at the same time?

I have a wage calculation form that start from retrieving sum of wage from database and then, after user add some extra payment in order to calculate Net wage, save them back to database once again.
My problem was my code is only work to save one record at a time. What I need was to be able to save all records at the same time. So could you please help me.
<%
if Rs.eof then
response.write "<tr><td colspan=""9""> "
call displayNotFoundRecord
response.write "</td></tr>"
Else
Do while Rs.AbsolutePage = strPageCurrent And Not Rs.EOF
dim color
y = n mod 2
if y > 0 then
color = "EFF4FA"
else
color = "ffffff"
end if
if rs.fields.item("if_social_sec") = "True" then
displaytxt = ""
soc_sec_v = soc_sec
else
displaytxt = "none"
soc_sec_v = 0
end if
wage_v = rs.fields.item("Total")
salary_v = rs.fields.item("lb_salary")
if rs.fields.item("lb_type") = "perunit" then
salary_wage = wage_v
displaytxt_w = "readonly class=""bgdisable"""
displaytxt_lb = "readonly class=""bgdisable"""
else
salary_wage = salary_v
displaytxt_w = ""
displaytxt_lb = ""
end if
if_pm = request.form("if_pm")
pm_pay = rs.fields.item("lb_pmPay")
if if_pm <> "" then
if_pm_v = pm_pay
disable_txt_pm = "readonly"
else
if_pm_v = 0
disable_txt_pm = "readonly class=""bgdisable"""
end if
%>
<form name="myform2_<%=n%>" action="salary_action.asp" method="POST">
<tr bgcolor="#<%=color%>">
<td class="btline difcursor" nowrap width="7%"> <%=rs.fields.item("lb_name")%></td>
<td class="btline center" nowrap width="8%"><input type="text" name="working_day" id="working_day" value="<%=rs.fields.item("MaxOfdays")%>" size="7" <%=displaytxt_w%> onFocus="startCalc(this);" onBlur="stopCalc(this);"></td>
<td class="btline " nowrap width="10%"><input type="text" name="wage" id="wage" value="<%=salary_wage%>" onFocus="startCalc(this);" onBlur="stopCalc(this);"></td>
<td class="btline center" nowrap width="8%"><input type="text" name="OT" id="OT" size="7" value="<%=if_OT_v%>" onFocus="startCalc(this);" onBlur="stopCalc(this);" <%=disabled_ot%>></td>
<td class="btline center" nowrap width="6%" ><input type="text" name="OT_rate" id="OT_rate" size="5" value="<%=rs.fields.item("lbOT")%>" <%'=disabled_txt%> readonly class="bgdisable"></td>
<td class="btline center" nowrap width="6%" ><input type="text" name="OT_amt" id="OT_amt" size="5" value="" <%'=disabled_txt%> readonly class="bgdisable"></td>
<td class="btline center" nowrap width="8%" ><input type="text" name="soc_sec" id="soc_sec" size="7" value="<%=soc_sec_v%>" <%=disable_txt_soc%> onFocus="startCalc(this);" onBlur="stopCalc(this);"></td>
<td class="btline center" nowrap width="8%"><input type="text" name="pmPay" id="pmPay" size="7" value="<%=if_pm_v%>" onFocus="startCalc(this);" onBlur="stopCalc(this);" <%'=disable_txt_pm%> readonly class="bgdisable"></td>
<td class="btline" nowrap style="padding-left: 10px" width="8%" ><input type="text" name="ex_pay" id="ex_pay" size="7" onFocus="startCalc(this);" onBlur="stopCalc(this);"></td>
<td class="btline bold " width="10%"><input type="text" name="net_wage" id="net_wage" size="7" readonly class="bgdisable">
<input type="hidden" name="lb_type" id="lb_type" size="7" value="<%=rs.fields.item("lb_type")%>">
<input type="hidden" name="date_from" id="date_from" size="7" value="<%=date_from_txt%>">
<input type="hidden" name="date_to" id="date_to" size="7" value="<%=date_to_txt%>">
<input type="hidden" name="lb_id" id="lb_id" size="7" value="<%=rs.fields.item("lb_id")%>">
<input type="hidden" value="N" name="edit_salary">
</td>
<td class="btline"><input type="text" name="sar_note" value="" size="14"></td>
<td class="btline" > <input type="submit" value="Save1"></td>
</tr>
</form>
<%
Rs.movenext
n = n + 1
Loop
End if
Rs.close
set Rs=nothing
Call DBConnClose()
%>
<tr>
<td colspan="12" align="center" style="padding:10px;">
<input type="submit" value="Save2">
</td>
</tr>
What I need is to make "Save2" work. But right now only "Save1" that work.
Add (my script) :
<script>
var intervals = {};
function startCalc(sender){
var key = sender.form.name;
intervals[key] = setInterval(function() {
calc(key);
},1);
}
function calc(key){
var oForm = document.forms[key];
working_day = oForm.working_day.value;
wage = oForm.wage.value;
lb_type_v = oForm.lb_type.value;
if (lb_type_v == "daily")
{
wage = wage * working_day;
}
else
{
wage = wage;
}
OT_rate = oForm.OT_rate.value;
OT = oForm.OT.value;
OT_amt = OT_rate * OT;
soc_sec = oForm.soc_sec.value;
ex_pay= oForm.ex_pay.value;
pmPay = oForm.pmPay.value;
net_wage = (wage * 1) + (OT_amt * 1) - (soc_sec * 1) + (ex_pay * 1) + (pmPay * 1);
oForm.OT_amt.value = OT_amt;
oForm.net_wage.value = net_wage.toFixed(2);
}
function stopCalc(sender){
var key = sender.form.name;
clearInterval(intervals[key]);
}
</script>

In your loop, you will have to change each input name so that it is unique. You should also change the IDs to make them unique, depending on what you are doing with the IDs, but it's the name that is important if retrieving all of the records values in one go.
Easiest way to do this is to add your database ID to the name and ids.
So, for example, change this line...
<td class="btline center" nowrap width="8%"><input type="text" name="OT" id="OT" size="7" value="<%=if_OT_v%>" onFocus="startCalc(this);" onBlur="stopCalc(this);" <%=disabled_ot%>></td>
...to...
<td class="btline center" nowrap width="8%"><input type="text" name="OT_<%=rs.fields.item("lb_id")%>" id="OT_<%=rs.fields.item("lb_id")%>" size="7" value="<%=if_OT_v%>" onFocus="startCalc(this);" onBlur="stopCalc(this);" <%=disabled_ot%>></td>
(What this does is make each name and id unique by adding an underscore character and the lb_id value from your database.)
Then in the script where you retrieve your values (you didn't post this code so I am not sure what it looks like), you will need to open the same recordset and loop through checking for values.
So before you probably had lines like...
x = Request("OT")
You would instead do something like this...
'Open your recordset
Do while Rs.AbsolutePage = strPageCurrent And Not Rs.EOF
x = Request("OT_" & Rs("lb_id"))
'....all your other requests here
'save to database here etc etc
Loop
Ok, here is your code modified (have a look at the comments to see where I have moved and removed things)...
<!--move form tag outside of table-->
<form name="myform2" action="salary_action.asp" method="POST">
<%
if Rs.eof then
response.write "<tr><td colspan=""9""> "
call displayNotFoundRecord
response.write "</td></tr>"
Else
Do while Rs.AbsolutePage = strPageCurrent And Not Rs.EOF
dim color
y = n mod 2
if y > 0 then
color = "EFF4FA"
else
color = "ffffff"
end if
if rs.fields.item("if_social_sec") = "True" then
displaytxt = ""
soc_sec_v = soc_sec
else
displaytxt = "none"
soc_sec_v = 0
end if
wage_v = rs.fields.item("Total")
salary_v = rs.fields.item("lb_salary")
if rs.fields.item("lb_type") = "perunit" then
salary_wage = wage_v
displaytxt_w = "readonly class=""bgdisable"""
displaytxt_lb = "readonly class=""bgdisable"""
else
salary_wage = salary_v
displaytxt_w = ""
displaytxt_lb = ""
end if
if_pm = request.form("if_pm")
pm_pay = rs.fields.item("lb_pmPay")
if if_pm <> "" then
if_pm_v = pm_pay
disable_txt_pm = "readonly"
else
if_pm_v = 0
disable_txt_pm = "readonly class=""bgdisable"""
end if
%>
<!--form tag moved outside of table-->
<tr bgcolor="#<%=color%>">
<td class="btline difcursor" nowrap width="7%"> <%=rs.fields.item("lb_name")%></td>
<td class="btline center" nowrap width="8%"><input type="text" name="working_day_<%=rs.fields.item("lb_id")%>" id="working_day_<%=rs.fields.item("lb_id")%>" value="<%=rs.fields.item("MaxOfdays")%>" size="7" <%=displaytxt_w%> onFocus="startCalc(<%=rs.fields.item("lb_id")%>);" onBlur="stopCalc(<%=rs.fields.item("lb_id")%>);"></td>
<td class="btline " nowrap width="10%"><input type="text" name="wage_<%=rs.fields.item("lb_id")%>" id="wage_<%=rs.fields.item("lb_id")%>" value="<%=salary_wage%>" onFocus="startCalc(<%=rs.fields.item("lb_id")%>);" onBlur="stopCalc(<%=rs.fields.item("lb_id")%>);"></td>
<td class="btline center" nowrap width="8%"><input type="text" name="OT_<%=rs.fields.item("lb_id")%>" id="OT_<%=rs.fields.item("lb_id")%>" size="7" value="<%=if_OT_v%>" onFocus="startCalc(<%=rs.fields.item("lb_id")%>);" onBlur="stopCalc(<%=rs.fields.item("lb_id")%>);" <%=disabled_ot%>></td>
<td class="btline center" nowrap width="6%" ><input type="text" name="OT_rate_<%=rs.fields.item("lb_id")%>" id="OT_rate_<%=rs.fields.item("lb_id")%>" size="5" value="<%=rs.fields.item("lbOT")%>" <%'=disabled_txt%> readonly class="bgdisable"></td>
<td class="btline center" nowrap width="6%" ><input type="text" name="OT_amt_<%=rs.fields.item("lb_id")%>" id="OT_amt_<%=rs.fields.item("lb_id")%>" size="5" value="" <%'=disabled_txt%> readonly class="bgdisable"></td>
<td class="btline center" nowrap width="8%" ><input type="text" name="soc_sec_<%=rs.fields.item("lb_id")%>" id="soc_sec_<%=rs.fields.item("lb_id")%>" size="7" value="<%=soc_sec_v%>" <%=disable_txt_soc%> onFocus="startCalc(<%=rs.fields.item("lb_id")%>);" onBlur="stopCalc(<%=rs.fields.item("lb_id")%>);"></td>
<td class="btline center" nowrap width="8%"><input type="text" name="pmPay_<%=rs.fields.item("lb_id")%>" id="pmPay_<%=rs.fields.item("lb_id")%>" size="7" value="<%=if_pm_v%>" onFocus="startCalc(<%=rs.fields.item("lb_id")%>);" onBlur="stopCalc(<%=rs.fields.item("lb_id")%>);" <%'=disable_txt_pm%> readonly class="bgdisable"></td>
<td class="btline" nowrap style="padding-left: 10px" width="8%" ><input type="text" name="ex_pay_<%=rs.fields.item("lb_id")%>" id="ex_pay_<%=rs.fields.item("lb_id")%>" size="7" onFocus="startCalc(<%=rs.fields.item("lb_id")%>);" onBlur="stopCalc(<%=rs.fields.item("lb_id")%>);"></td>
<td class="btline bold " width="10%"><input type="text" name="net_wage_<%=rs.fields.item("lb_id")%>" id="net_wage_<%=rs.fields.item("lb_id")%>" size="7" readonly class="bgdisable">
<input type="hidden" name="lb_type_<%=rs.fields.item("lb_id")%>" id="lb_type_<%=rs.fields.item("lb_id")%>" size="7" value="<%=rs.fields.item("lb_type")%>">
<input type="hidden" name="date_from_<%=rs.fields.item("lb_id")%>" id="date_from_<%=rs.fields.item("lb_id")%>" size="7" value="<%=date_from_txt%>">
<input type="hidden" name="date_to_<%=rs.fields.item("lb_id")%>" id="date_to_<%=rs.fields.item("lb_id")%>" size="7" value="<%=date_to_txt%>">
<input type="hidden" name="lb_id_<%=rs.fields.item("lb_id")%>" id="lb_id_<%=rs.fields.item("lb_id")%>" size="7" value="<%=rs.fields.item("lb_id")%>">
<input type="hidden" value="N" name="edit_salary_<%=rs.fields.item("lb_id")%>">
</td>
<td class="btline"><input type="text" name="sar_note" value="" size="14"></td>
<td class="btline" > <!--submit button removed--></td>
</tr>
<!--form tag removed-->
<%
Rs.movenext
n = n + 1
Loop
End if
Rs.close
set Rs=nothing
Call DBConnClose()
%>
<tr>
<td colspan="12" align="center" style="padding:10px;">
<input type="submit" value="Save2">
</td>
</tr>
<!--move form tag after end of table-->
</form>
...and your JavaScript (I just did it in Notepad so hopefully it works)...
<script>
var intervals = {};
function startCalc(key){
intervals[key] = setInterval(function() {
calc(key);
},1);
}
function calc(key){
// var oForm = document.forms[key];
working_day = document.getElementById("working_day_" + key).value; //oForm.working_day.value;
wage = document.getElementById("wage_" + key).value; //oForm.wage.value;
lb_type_v = document.getElementById("lb_type_" + key).value; //oForm.lb_type.value;
if (lb_type_v == "daily")
{
wage = wage * working_day;
}
else
{
wage = wage;
}
OT_rate = document.getElementById("OT_rate_" + key).value; //oForm.OT_rate.value;
OT = document.getElementById("OT_" + key).value; //oForm.OT.value;
OT_amt = OT_rate * OT;
soc_sec = document.getElementById("soc_sec_" + key).value; //oForm.soc_sec.value;
ex_pay= document.getElementById("ex_pay_" + key).value; //oForm.ex_pay.value;
pmPay = document.getElementById("pmPay_" + key).value; //oForm.pmPay.value;
net_wage = (wage * 1) + (OT_amt * 1) - (soc_sec * 1) + (ex_pay * 1) + (pmPay * 1);
document.getElementById("OT_amt_" + key).value = OT_amt; //oForm.OT_amt.value = OT_amt;
document.getElementById("net_wage_" + key).value = net_wage.toFixed(2); //oForm.net_wage.value = net_wage.toFixed(2);
}
function stopCalc(key){
clearInterval(intervals[key]);
}
</script>
You will also need to modify the page that your form submits to. Hopefully you can do this using the instructions I gave above???