By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,442 Members | 1,373 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,442 IT Pros & Developers. It's quick & easy.

To create a dynamic table with add button validation is not working for 2nd row

P: 2
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script LANGUAGE="JavaScript">
  4. function addRow(tableID){
  5. var table = document.getElementById(tableID);
  6. var rowCount = table.rows.length;
  7. var row = table.insertRow(rowCount);
  8. var cell1 = row.insertCell(0);
  9. var element1 = document.createElement("input");
  10. element1.type = "text";
  11. element1.name="txtChar";
  12. cell1.appendChild(element1);
  13. //alert("cell1");
  14. var cell2 = row.insertCell(1);
  15. var element2 = document.createElement("input");
  16. element2.type = "text";
  17. cell2.appendChild(element2);
  18. //alert("cell2");
  19. var cell3 = row.insertCell(2);
  20. var element3 = document.createElement("textarea");
  21. element3.setAttribute("name","mytextarea");
  22. element3.setAttribute("cols","20");
  23. element3.setAttribute("rows","1");
  24. cell3.appendChild(element3);
  25. //alert("cell3");
  26. }
  27.  
  28.  function isNumberKey(evt)
  29.       {
  30.  
  31.  
  32.          var charCode = (evt.which) ? evt.which : event.keyCode
  33.          if (charCode > 31 && (charCode < 48 || charCode > 57))
  34. {
  35. alert("hi");
  36. document.getElementById( "out" ).innerText="plz etr number";
  37.  
  38.                      return false;
  39.  
  40.  
  41.          return true;
  42.       }
  43.  
  44. }
  45.  
  46.  
  47. </script>
  48. </head>
  49. <body>
  50. <form name="f1" id="f1"><input type="button" value="Add" onclick="addRow('datatable')">
  51. <div id="out"></div>
  52. <table id="datatable" cellspacing="0" border="1">
  53. <th>phoneno</th>
  54. <th></th>
  55. <tbody>
  56. <tr>
  57. <td><input type="text" id="txtChar"
  58.  onkeypress="return isNumberKey(event)" name="txtChar"></td>
  59. <td><input type="text"></td>
  60. <td><textarea rows="1" cols="20"></textarea></td>
  61. </tr>
  62. </tbody>
  63. </table>
  64. </form>
  65. </body>
  66. </html>
i need to apply validation for first column but when i click add to add another row the validation for column is not working " how to apply validation for all column"
Mar 18 '12 #1
Share this Question
Share on Google+
3 Replies


Dormilich
Expert Mod 5K+
P: 8,639
itís not working because you do not trigger validation. on button press all you do is creating a new row.
Mar 18 '12 #2

P: 2
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script LANGUAGE="JavaScript">
  4. function addRow(tableID){
  5. var table = document.getElementById(tableID);
  6. var rowCount = table.rows.length;
  7. var row = table.insertRow(rowCount);
  8. var cell1 = row.insertCell(0);
  9. /*var element1 = document.createElement("input");
  10. element1.type = "text";*/
  11.  
  12. cell1.innerHTML="<input type='text' id='txtChar' onkeypress='return isNumberKey(event)' name='txtChar'>";//alert("cell1");
  13. var cell2 = row.insertCell(1);
  14. var element2 = document.createElement("input");
  15. element2.type = "text";
  16.  
  17. cell2.appendChild(element2);
  18. //alert("cell2");
  19. var cell3 = row.insertCell(2);
  20. var element3 = document.createElement("textarea");
  21. element3.setAttribute("name","mytextarea");
  22. element3.setAttribute("cols","20");
  23. element3.setAttribute("rows","1");
  24. cell3.appendChild(element3);
  25. //alert("cell3");
  26. }
  27.  
  28.  function isNumberKey(evt)
  29.       {
  30.  
  31.  
  32.          var charCode = (evt.which) ? evt.which : event.keyCode
  33.          if (charCode > 31 && (charCode < 48 || charCode > 57))
  34. {
  35. alert("hi");
  36. document.getElementById( "out" ).innerText="plz etr number";
  37.  
  38.                      return false;
  39.  
  40.  
  41.          return true;
  42.       }
  43.  
  44. }
  45.  
  46.  
  47. </script>
  48. </head>
  49. <body>
  50. <form name="f1" id="f1"><input type="button" value="Add" onclick="addRow('datatable')">
  51. <div id="out"></div>
  52. <table id="datatable" cellspacing="0" border="1">
  53. <th>phoneno</th>
  54. <th></th>
  55. <tbody>
  56. <tr>
  57. <td><input type="text" id="txtChar"
  58.  onkeypress="return isNumberKey(event)" name="txtChar"></td>
  59. <td><input type="text"></td>
  60. <td><textarea rows="1" cols="20"></textarea></td>
  61. </tr>
  62. </tbody>
  63. </table>
  64. </form>
  65. </body>
  66. </html>
Is there any alternate solution instead of using innerHTML for cell1" to make validation for 2nd row?
Mar 18 '12 #3

Dormilich
Expert Mod 5K+
P: 8,639
the highlighted code only creates a text field, nothing more.
Mar 18 '12 #4

Post your reply

Sign in to post your reply or Sign up for a free account.