I have a web form having multiple rows in HTML table. When I click Submit, it's updating all the rows ( passing input values of all the rows to the stored procedure parameter ). All I want is to pass and update only those rows where input values are changed.
My HTMl Source:
<html>
<head>
<title> Dashboard:</title>
<script language="JavaScript">
var gAutoPrint = true; // Tells whether to automatically call the print function
function printSpecial()
{
if (document.getElementById != null)
{
var html = '<HTML>\n<HEAD>\n';
if (document.getElementsByTagName != null)
{
var headTags = document.getElementsByTagName("head");
if (headTags.length > 0)
html += headTags[0].innerHTML;
}
html += '\n</HE>\n<BODY>\n';
var printReadyElem = document.getElementById("printReady");
if (printReadyElem != null)
{
html += printReadyElem.innerHTML;
}
else
{
alert("Could not find the printReady function");
return;
}
html += '\n</BO>\n</HT>';
var printWin = window.open("","printSpecial");
printWin.document.open();
printWin.document.write(html);
printWin.document.close();
if (gAutoPrint)
printWin.print();
}
else
{
alert("The print ready feature is only available if you are using an browser. Please update your browswer.");
}
}
function validate()
{
//alert('here');
var elements = document.getElementById("frmDtls").elements ;
var val = [] ;
var flag = true;
var x = -1;
var y = 0;
if(flag == true)
{
document.frmDtls.hfrom.value = 'Updt' ;
document.frmDtls.method = "post" ;
document.frmDtls.action = "samepage.asp" ;
document.frmDtls.submit();
// alert("Record has been Updated Successfully!");
//window.location.href = window.location.href;
// location.reload();
}
// alert(flag);
}
</script>
</head>
<body background="Images/Notebook.jpg">
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111">
<tr>
<td width="100%" align="center">
<img border="0" src="Axalta Coating Systems Logo.jpg" width="1200" height="60"></td>
</tr>
</table>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td width="100%" bgcolor="#C0C0C0" align="center"><b>
<font face="Times New Roman" size="4"> CYCLE TIMES and UNITS for UPDATING </font></b>
</TD>
</tr>
</table>
<div id="printReady">
<div align="center" id="formdiv"><center>
<form id="frmDtls" name="frmDtls">
<!--<form id="frmDtls" name="frmDtls" target="MyFrame">-->
<iframe id="MyFrame" name="MyFrame" style="display:none;"></iframe>
<input type="hidden" name="hfrom" value = "">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td width="70%" bgcolor="#C0C0C0" align="center"><b>
<font face="Times New Roman" size="5">SELECTED DUAL CODE DETAILS </font></b> </td>
<td width="13%" align="Middle" valign = "Middle" bgcolor="#FFFF00">
<input type="button" name='update' value = 'Update' onclick='validate();'>
</TD>
<td width="17%" bgcolor="#C0C0C0" align="Center">
<b><font face="Times New Roman" size="2">
LATEST POSTING DATE / TIME 2/13/2019 7:09:20 AM</font></b>
</TD>
</tr>
</table>
<table BORDER="1" CELLSPACING="1" CELLPADDING="1"
style="font-weight: normal; letter-spacing: normal; text-align: left; width:100%;">
<tr align="center">
<th><small><small><span style="color:darkgreen;font-weight:bold">Profile ID</small></small></th>
<th><WIDTH="200"><small><small><span style="color:green;font-weight:bold">DUAL CODE</small></small></th>
<th><small><span style="color:darkgreen;font-weight:bold">Description</small></th>
<th><small><span style="color:darkgreen;font-weight:bold">R/D Material?</small></th>
<th><small><small><span style="color:darkgreen;font-weight:bold">Process Step Name</small></small></th>
<th><small><small><span style="color:darkgreen;font-weight:bold">Process Step Sequence</small></small></th>
<th><small><small><span style="color:darkgreen;font-weight:bold">FROM Event Status</small></small></th>
<th><small><small><span style="color:darkgreen;font-weight:bold">TO Event Status</small></small></th>
<th><small><small><span style="color:darkblue;font-weight:bold">Current CYCLE TIME</small></small></th>
<th><small><small><span style="color:darkred;font-weight:bold">Updated CYCLE TIME</small></small></th>
<th><small><small><span style="color:darkblue;font-weight:bold">Cycle Time Units</small></small></th>
<th><small><small><span style="color:darkred;font-weight:bold">Updated Units</small></small></th>
<th><small><small><span style="color:darkblue;font-weight:bold">Comments</small></small></th>
</tr>
<tr>
<td><input type="Hidden" name="l_enteredpartialdualcode" value="" > </td>
<td><input type="Hidden" name="l_selecteddualcodes" value="1026-FD195, 1143-01427" > </td>
<td><input type="Hidden" name="l_selectedprocessstepnames" value="" > </td>
<td><input type="Hidden" name="l_selectedgbtindicato" value="Both" > </td>
<td><input type="Hidden" name="l_multipledualcodess" value="" > </td>
</tr>
<TR align=center><TD Width=90 Height=3 nowrap ><B>1</B></TD><TD Width=90 Height=3 nowrap ><B>1026-FD195</B></TD><TD WIDTH=200 Height=3><small><small><B>1026-FD195 E500546 DARK GRAY WBPR</B></small></small></TD><TD WIDTH=30 Height=3><small><small><B></B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>Load_Cycle</B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>2</B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>LDGS </B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>LDGC </B></small></small></TD><TD WIDTH=70 Height=3><B>6</B></TD><TD WIDTH=70 Height=3><small><small><B><Select name = 'DDSQ_1_2' font-size=1><option value = '1' >1</option><option value = '2' >2</option><option value = '3' >3</option><option value = '4' >4</option><option value = '5' >5</option><option value = '6' selected>6</option><option value = '7' >7</option><option value = '8' >8</option><option value = '9' >9</option><option value = '10' >10</option><option value = '11' >11</option><option value = '12' >12</option><option value = '13' >13</option><option value = '14' >14</option><option value = '15' >15</option><option value = '16' >16</option><option value = '17' >17</option><option value = '18' >18</option><option value = '19' >19</option><option value = '20' >20</option><option value = '21' >21</option><option value = '22' >22</option><option value = '23' >23</option><option value = '24' >24</option><option value = '-1' >Clear</option></Select></B></small></small></TD>
<TD WIDTH=70 Height=3 nowrap><small><small><B>
Hours </B></small></small></TD><TD WIDTH=70 Height=3><small><small><B></B></small></small></TD>
<td WIDTH=100 Height=3><small><small><B><input type="text" name="txt_1_2" value="test1" >
</B></small></small></TD>
<TR align=center><TD Width=90 Height=3 nowrap ><B>1</B></TD><TD Width=90 Height=3 nowrap ><B>1026-FD195</B></TD><TD WIDTH=200 Height=3><small><small><B>1026-FD195 E500546 DARK GRAY WBPR</B></small></small></TD><TD WIDTH=30 Height=3><small><small><B></B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>Test_Cycle</B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>4</B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>TSTS </B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>TSTC </B></small></small></TD><TD WIDTH=70 Height=3><B>6</B></TD><TD WIDTH=70 Height=3><small><small><B><Select name = 'DDSQ_1_4' font-size=1><option value = '1' >1</option><option value = '2' >2</option><option value = '3' >3</option><option value = '4' >4</option><option value = '5' >5</option><option value = '6' selected>6</option><option value = '7' >7</option><option value = '8' >8</option><option value = '9' >9</option><option value = '10' >10</option><option value = '11' >11</option><option value = '12' >12</option><option value = '13' >13</option><option value = '14' >14</option><option value = '15' >15</option><option value = '16' >16</option><option value = '17' >17</option><option value = '18' >18</option><option value = '19' >19</option><option value = '20' >20</option><option value = '21' >21</option><option value = '22' >22</option><option value = '23' >23</option><option value = '24' >24</option><option value = '-1' >Clear</option></Select></B></small></small></TD>
<TD WIDTH=70 Height=3 nowrap><small><small><B>
Hours </B></small></small></TD><TD WIDTH=70 Height=3><small><small><B></B></small></small></TD>
<td WIDTH=100 Height=3><small><small><B><input type="text" name="txt_1_4" value="" >
</B></small></small></TD>
<TR align=center><TD Width=90 Height=3 nowrap ><B>1</B></TD><TD Width=90 Height=3 nowrap ><B>1026-FD195</B></TD><TD WIDTH=200 Height=3><small><small><B>1026-FD195 E500546 DARK GRAY WBPR</B></small></small></TD><TD WIDTH=30 Height=3><small><small><B></B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>FILL_Cycle</B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>6</B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>FLGS </B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>FLGC </B></small></small></TD><TD WIDTH=70 Height=3><B>4</B></TD><TD WIDTH=70 Height=3><small><small><B><Select name = 'DDSQ_1_6' font-size=1><option value = '1' >1</option><option value = '2' >2</option><option value = '3' >3</option><option value = '4' selected>4</option><option value = '5' >5</option><option value = '6' >6</option><option value = '7' >7</option><option value = '8' >8</option><option value = '9' >9</option><option value = '10' >10</option><option value = '11' >11</option><option value = '12' >12</option><option value = '13' >13</option><option value = '14' >14</option><option value = '15' >15</option><option value = '16' >16</option><option value = '17' >17</option><option value = '18' >18</option><option value = '19' >19</option><option value = '20' >20</option><option value = '21' >21</option><option value = '22' >22</option><option value = '23' >23</option><option value = '24' >24</option><option value = '-1' >Clear</option></Select></B></small></small></TD>
<TD WIDTH=70 Height=3 nowrap><small><small><B>
Hours </B></small></small></TD><TD WIDTH=70 Height=3><small><small><B></B></small></small></TD>
<td WIDTH=100 Height=3><small><small><B><input type="text" name="txt_1_6" value="test1" >
</B></small></small></TD>
<TR align=center><TD Width=90 Height=3 nowrap ><B>2</B></TD><TD Width=90 Height=3 nowrap ><B>1143-01427</B></TD><TD WIDTH=200 Height=3><small><small><B>1143-01427 E450552 TITANIUM SBPR</B></small></small></TD><TD WIDTH=30 Height=3><small><small><B></B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>Load_Cycle</B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>2</B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>LDGS </B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>LDGC </B></small></small></TD><TD WIDTH=70 Height=3><B>3</B></TD><TD WIDTH=70 Height=3><small><small><B><Select name = 'DDSQ_2_2' font-size=1><option value = '1' >1</option><option value = '2' >2</option><option value = '3' selected>3</option><option value = '4' >4</option><option value = '5' >5</option><option value = '6' >6</option><option value = '7' >7</option><option value = '8' >8</option><option value = '9' >9</option><option value = '10' >10</option><option value = '11' >11</option><option value = '12' >12</option><option value = '13' >13</option><option value = '14' >14</option><option value = '15' >15</option><option value = '16' >16</option><option value = '17' >17</option><option value = '18' >18</option><option value = '19' >19</option><option value = '20' >20</option><option value = '21' >21</option><option value = '22' >22</option><option value = '23' >23</option><option value = '24' >24</option><option value = '-1' >Clear</option></Select></B></small></small></TD>
<TD WIDTH=70 Height=3 nowrap><small><small><B>
Hours </B></small></small></TD><TD WIDTH=70 Height=3><small><small><B></B></small></small></TD>
<td WIDTH=100 Height=3><small><small><B><input type="text" name="txt_2_2" value="" >
</B></small></small></TD>
<TR align=center><TD Width=90 Height=3 nowrap ><B>2</B></TD><TD Width=90 Height=3 nowrap ><B>1143-01427</B></TD><TD WIDTH=200 Height=3><small><small><B>1143-01427 E450552 TITANIUM SBPR</B></small></small></TD><TD WIDTH=30 Height=3><small><small><B></B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>Test_Cycle</B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>4</B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>TSTS </B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>TSTC </B></small></small></TD><TD WIDTH=70 Height=3><B>6</B></TD><TD WIDTH=70 Height=3><small><small><B><Select name = 'DDSQ_2_4' font-size=1><option value = '1' >1</option><option value = '2' >2</option><option value = '3' >3</option><option value = '4' >4</option><option value = '5' >5</option><option value = '6' selected>6</option><option value = '7' >7</option><option value = '8' >8</option><option value = '9' >9</option><option value = '10' >10</option><option value = '11' >11</option><option value = '12' >12</option><option value = '13' >13</option><option value = '14' >14</option><option value = '15' >15</option><option value = '16' >16</option><option value = '17' >17</option><option value = '18' >18</option><option value = '19' >19</option><option value = '20' >20</option><option value = '21' >21</option><option value = '22' >22</option><option value = '23' >23</option><option value = '24' >24</option><option value = '-1' >Clear</option></Select></B></small></small></TD>
<TD WIDTH=70 Height=3 nowrap><small><small><B>
Hours </B></small></small></TD><TD WIDTH=70 Height=3><small><small><B></B></small></small></TD>
<td WIDTH=100 Height=3><small><small><B><input type="text" name="txt_2_4" value="test" >
</B></small></small></TD>
<TR align=center><TD Width=90 Height=3 nowrap ><B>2</B></TD><TD Width=90 Height=3 nowrap ><B>1143-01427</B></TD><TD WIDTH=200 Height=3><small><small><B>1143-01427 E450552 TITANIUM SBPR</B></small></small></TD><TD WIDTH=30 Height=3><small><small><B></B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>FILL_Cycle</B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>6</B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>FLGS </B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>FLGC </B></small></small></TD><TD WIDTH=70 Height=3><B>6</B></TD><TD WIDTH=70 Height=3><small><small><B><Select name = 'DDSQ_2_6' font-size=1><option value = '1' >1</option><option value = '2' >2</option><option value = '3' >3</option><option value = '4' >4</option><option value = '5' >5</option><option value = '6' selected>6</option><option value = '7' >7</option><option value = '8' >8</option><option value = '9' >9</option><option value = '10' >10</option><option value = '11' >11</option><option value = '12' >12</option><option value = '13' >13</option><option value = '14' >14</option><option value = '15' >15</option><option value = '16' >16</option><option value = '17' >17</option><option value = '18' >18</option><option value = '19' >19</option><option value = '20' >20</option><option value = '21' >21</option><option value = '22' >22</option><option value = '23' >23</option><option value = '24' >24</option><option value = '-1' >Clear</option></Select></B></small></small></TD>
<TD WIDTH=70 Height=3 nowrap><small><small><B>
Hours </B></small></small></TD><TD WIDTH=70 Height=3><small><small><B></B></small></small></TD>
<td WIDTH=100 Height=3><small><small><B><input type="text" name="txt_2_6" value="test2" >
</B></small></small></TD>
</table>
</form>
</center>
</div>
</div>
<p><small><small><strong>
End of Report.</strong></small></small></p>
<p align="center"><strong><big><big> </big></big></strong></p>
</body>
</html>
Run code snippetExpand snippetTemplate is here : Web Page Template
Currently I am trying to append all the row id's with ';' separated on textbox OnChange event in javascript and store it in variable and then pass only these id's to my sql query but I am not able to figure out how to do that.
Is there any way you guys can help me out with?.
My HTML :
<input type="text" name="txt_<%=l_profileid %>_<%=l_processstepsequence%>" value="<%= l_comments%>" onfocus="this.oldvalue = this.value;" onchange="onChangeTest(this);this.oldvalue = this.value;" >function onChangeTest(textbox){
alert("Value is " + textbox.value + "\n" + "Old Value is " + textbox.oldvalue + "\n" + "Name is " + textbox.name);
}If I got your question correctly, I think this should work. but If you can add some code, or explain what do you want to do with the row IDs, I can help more
function submitTable(){
var rows_ids = [];
$('#content-table .new-value').each(function(){
var old_value = parseInt($(this).parent().find('.old-value').text());
var new_value = parseInt($(this).find('input.desired-input').val());
if(old_value !== new_value){
rows_ids.push($(this).parent().attr('id'));
// use this as you want, it containes the id for the changed rows.
// you have the changes value in new_value, so you also can use it.
}
});
console.log(rows_ids);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="content-table">
<tr id="1">
<td>STG</td>
<td class="old-value">4</td>
<td class="new-value"><input type="text" name="txt_1_2" value="4" class="desired-input"></td>
</tr>
<tr id="2">
<td>LDG</td>
<td class="old-value">3</td>
<td class="new-value"><input type="text" name="txt_2_5" value="3" class="desired-input"></td>
</tr>
<tr id="3">
<td>FLG</td>
<td class="old-value">6</td>
<td class="new-value"><input type="text" name="txt_3_6" value="6" class="desired-input"></td>
</tr>
<tr id="4">
<td>FLG</td>
<td class="old-value">7</td>
<td class="new-value"><input type="text" name="txt_4_3" value="7" class="desired-input"></td>
</tr>
</table>
<button type="button" name="button" onclick="submitTable()">Submit</button>EDIT:
if you mean that you want to store the old value in the same input you can use the data- attribute to do so... then the code should look like this
function submitTable(){
var rows_ids = [];
$('#content-table .desired-input').each(function(){
var old_value = parseInt($(this).data('old-value'));
var new_value = parseInt($(this).val());
if(old_value !== new_value){
rows_ids.push($(this).closest('tr').attr('id'));
// use this as you want, it containes the id for the changed rows.
// you have the changes value in new_value, so you also can use it.
}
});
console.log(rows_ids);
}
and you need to add data-old-value="..." to your input
<input type="text" name="" value="7" class="desired-input" data-old-value="7">
EDIT2: based on your comment, you can use .split to split the name on _ and then get the id that you want, for the name format that you mentioned it should be at index 1,, the js code should look like
function submitTable(){
var ids = [];
$('#content-table .desired-input').each(function(){
var old_value = parseInt($(this).data('old-value'));
var new_value = parseInt($(this).val());
if(old_value !== new_value){
ids.push($(this).attr('name').split('_')[1]);
}
});
console.log(ids);
}