How to validate dynamic row randomly
Question
I have a dynamic row creation, deletion and validation. For creating and deleting the row it works properly. Suppose, I am deleting first row , after that row can't be validated. If I am not deleting first row, I can validate remaining. If I am deleting any intermediate row, after that row can't be validated.
<head>
<title>Insert title here</title>
</head>
<body>
<TD>
<FORM NAME="iForm">
<INPUT type="HIDDEN" name="_row_count" id="_row_count" value="0" />
<INPUT type="HIDDEN" name="rowcount" id="rowcount" value="0" />
<P>
<INPUT type="button" value="Add Rows" onclick="addRowToTable();" />
</P>
<TABLE width='100%' border='1' id="CommTble">
<TR>
<TH CLASS='vrTableHeader' align='left'> Feild1 </TH>
<TH CLASS='vrTableHeader' align='left'>Feild2 </TH>
<TH CLASS='vrTableHeader' align='left'>Remove Field </TH>
</TR>
<TR>
<TD>
<INPUT TYPE='TEXT' CLASS='vrFormText' NAME='field' id='field10' SIZE=15 MAXLENGTH="25" />
</TD>
<TD>
<INPUT TYPE='TEXT' CLASS='vrFormText' NAME='field' id='field20' SIZE=15 MAXLENGTH="25">
</TD>
<TD>
<INPUT TYPE='button' CLASS='vrFormText' NAME='DelButton_0' VALUE='Remove Row' SIZE=20 MAXLENGTH="18" ONCLICK="removeRowFromTable1(this,0);"/>
</TD>
</TR>
</TABLE>
<P>
<input type="button" class="submitest" value=" Save Record " name="Submit1" onclick="checkCommodity()">
<INPUT TYPE="RESET" NAME="Reset" CLASS="submitreset" VALUE="Reset">
</P>
</FORM>
</TD>
</body>
function addRowToTable()
{
var tbl = document.getElementById('CommTble');
var lastRow = tbl.rows.length;
var iteration = lastRow-1;
lastRow = tbl.rows.length;
var row = tbl.insertRow(lastRow);
var cellTwo = row.insertCell(0);
var e2 = document.createElement('input');
e2.type = 'text';
e2.name = 'field1'+ iteration;
e2.id = 'field1'+ iteration;
e2.size = '15';
e2.onkeypress=function(){return imposeMaxLength(this,parseInt(25))};
cellTwo.appendChild(e2);
var cellTwo = row.insertCell(1);
var e3 = document.createElement('input');
e3.type = 'text';
e3.name = 'field2'+ iteration;
e3.id = 'field2'+ iteration;
e3.size = '15';
e3.onkeypress=function(){return imposeMaxLength(this,parseInt(25))};
cellTwo.appendChild(e3);
var cellNine = row.insertCell(2);
var e9 = document.createElement('input');
e9.type='button';
e9.name='DelButton_'+iteration;
e9.id='DelButton_'+iteration;
e9.value='Remove Row';
e9.size='20';
e9.onclick=function(){return deleteRow(this.parentNode.parentNode.rowIndex)};
cellNine.appendChild(e9);
iForm._row_count.value=iteration;
iteration+=1;
}
function deleteRow(i)
{
document.getElementById('CommTble').deleteRow(i);
}
function checkCommodity()
{
var tble = document.getElementById('CommTble');
var LastRow = tble.rows.length-1;
var rcount=0;
for(var i=0;i<LastRow;i++)
{
var a=document.getElementById('field1'+i).value;
if(document.getElementById("field1"+i+"").value=="")
{
alert ("field1 value missing");
document.getElementById("field1"+i+"").focus();
return false;
}
if(document.getElementById("field2"+i+"").value=="")
{
alert ("field2 value missing");
document.getElementById("field2"+i+"").focus();
return false;
}
}
return true;
}
var size=0;
var comarray= new Array(100);
function removeRowFromTable1(r,p)
{
var i=r.parentNode.parentNode.rowIndex;
var q=p;
if(isNaN(q)==true)
{
p=q.substr(10);
}
else
{
p=q;
}
comarray[size]=p;
size+=1;
var n=document.getElementById('CommTble').rows.length;
if(n==2)
alert("Atleast one has to be there. So it is not possible to delete the current row !!");
else
document.getElementById('CommTble').deleteRow(i);
}
1 answers
solution1
0 2014-08-29 07:12:53
I have modified your code little bit. Please look at modified code below. It works fine
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<TD>
<FORM NAME="iForm">
<INPUT type="HIDDEN" name="_row_count" id="_row_count" value="0" />
<INPUT type="HIDDEN" name="rowcount" id="rowcount" value="0" />
<P>
<INPUT type="button" value="Add Rows" onclick="addRowToTable();" />
</P>
<TABLE width='100%' border='1' id="CommTble">
<TR>
<TH CLASS='vrTableHeader' align='left'> Feild1 </TH>
<TH CLASS='vrTableHeader' align='left'>Feild2 </TH>
<TH CLASS='vrTableHeader' align='left'>Remove Field </TH>
</TR>
<TR>
<TD>
<INPUT TYPE='TEXT' NAME='field' id='field10' SIZE=15 MAXLENGTH="25" value="" />
</TD>
<TD>
<INPUT TYPE='TEXT' NAME='field' id='field20' SIZE=15 MAXLENGTH="25" value="" />
</TD>
<TD>
<INPUT TYPE='button' CLASS='vrFormText' NAME='DelButton_0' VALUE='Remove Row' SIZE=20 MAXLENGTH="18" ONCLICK="removeRowFromTable1(this,0);"/>
</TD>
</TR>
</TABLE>
<P>
<input type="button" class="submitest" value=" Save Record " name="Submit1" onclick="checkCommodity()">
<INPUT TYPE="RESET" NAME="Reset" CLASS="submitreset" VALUE="Reset">
<INPUT TYPE="hidden" id="deleteValue" VALUE="">
</P>
</FORM>
</TD>
</body>
<script>
document.getElementById('deleteValue').value = "";
function addRowToTable()
{
var tbl = document.getElementById('CommTble');
var lastRow = tbl.rows.length;
var iteration = lastRow-1;
lastRow = tbl.rows.length;
var row = tbl.insertRow(lastRow);
var cellTwo = row.insertCell(0);
var e2 = document.createElement('input');
e2.type = 'text';
e2.name = 'field1'+ iteration;
e2.id = 'field1'+ iteration;
e2.size = '15';
e2.onkeypress=function(){return imposeMaxLength(this,parseInt(25))};
cellTwo.appendChild(e2);
var cellTwo = row.insertCell(1);
var e3 = document.createElement('input');
e3.type = 'text';
e3.name = 'field2'+ iteration;
e3.id = 'field2'+ iteration;
e3.size = '15';
e3.onkeypress=function(){return imposeMaxLength(this,parseInt(25))};
cellTwo.appendChild(e3);
var cellNine = row.insertCell(2);
var e9 = document.createElement('input');
e9.type='button';
e9.name='DelButton_'+iteration;
e9.id='DelButton_'+iteration;
e9.value='Remove Row';
e9.size='20';
e9.onclick=function(){return deleteRow(this.parentNode.parentNode.rowIndex)};
cellNine.appendChild(e9);
iForm._row_count.value=iteration;
iteration+=1;
}
function deleteRow(i)
{
var delVal = document.getElementById('deleteValue').value;
if(delVal == ""){
document.getElementById('deleteValue').value = "|"+delVal+i+"|";
}
else{
document.getElementById('deleteValue').value = delVal+i+"|";
}
document.getElementById('CommTble').deleteRow(i);
}
function checkCommodity()
{
var tble = document.getElementById('CommTble');
var LastRow = tble.rows.length-1;
var rcount=0;
var delVal = document.getElementById('deleteValue').value;
for(var i=0;i<LastRow;i++)
{
if(delVal.indexOf("|"+i+"|") <= -1){
var a=document.getElementById("field1"+i).value;
if(document.getElementById("field1"+i+"").value=="")
{
alert ("field1"+i+" value missing");
document.getElementById("field1"+i+"").focus();
return false;
}
if(document.getElementById("field2"+i+"").value=="")
{
alert ("field2"+i+" value missing");
document.getElementById("field2"+i+"").focus();
return false;
}
}
}
return true;
}
var size=0;
var comarray= new Array(100);
function removeRowFromTable1(r,p)
{
var delVal = document.getElementById('deleteValue').value;
if(delVal == ""){
document.getElementById('deleteValue').value = "|"+delVal+p+"|";
}
else{
document.getElementById('deleteValue').value = delVal+p+"|";
}
var i=r.parentNode.parentNode.rowIndex;
var q=p;
if(isNaN(q)==true)
{
p=q.substr(10);
}
else
{
p=q;
}
comarray[size]=p;
size+=1;
var n=document.getElementById('CommTble').rows.length;
if(n==2)
alert("Atleast one has to be there. So it is not possible to delete the current row !!");
else
document.getElementById('CommTble').deleteRow(i);
}
</script>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to validate dynamic row + chosen select with javascript?
how to validate dynamic row array values in javascript
How to Validate Dynamic form with PHP?
How to validate dynamic values in postman
How to validate dynamic content using jQuery Validate plugin
how to validate html elements with dynamic id
How to validate dynamic datepicker in jquery .Validation()?
How to validate dynamic form in React Native?
how to validate input in a dynamic html table?
How to validate dynamic radio button from PHP
Related Tags