javascript problem

Posted by Gourav on Stack Overflow See other posts from Stack Overflow or by Gourav
Published on 2010-05-02T07:04:19Z Indexed on 2010/05/02 7:07 UTC
Read the original article Hit count: 230

Filed under:

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

© Stack Overflow or respective owner

Related posts about JavaScript