I have created a dynamic table whose rows gets appended by click of the "Add" button, i want the user not to be able to submit the page if no value is entered in all the rows of the table.
how do i achieve this
The code is
<html>
<head>
<script type="text/javascript">
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
var iteration = lastRow+1;
var row = tbl.insertRow(lastRow);
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txtRow' + iteration;
el.id = 'txtRow' + iteration;
el.size = 40;
cellRight.appendChild(el);
}
function validation()
{
var a=document.getElementById('tblSample').rows.length;
for(i=0;i<a;i++)
{
alert(document.getElementById('tblSample').txtRow[i].value);//this doesnt work
}
return true;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form name ='qqq' action="sample.html">
<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Submit" onclick="return validation();" />
</p>
<p>
<table border="1" id="tblSample">
<tr>
<td>1</td>
<td>The 1st row</td>
</tr>
</table>
</p>
</form>
</body>
</html>
Please suggest
