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

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • jayashree193
    New Member
    • Mar 2012
    • 2
    #1

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

    Code:
    <html>
<head>
<script LANGUAGE="JavaScript">
function addRow(tableID){
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name="txtChar";
cell1.appendChild(element1);
//alert("cell1");
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
//alert("cell2");
var cell3 = row.insertCell(2);
var element3 = document.createElement("textarea");
element3.setAttribute("name","mytextarea");
element3.setAttribute("cols","20");
element3.setAttribute("rows","1");
cell3.appendChild(element3);
//alert("cell3");
}

 function isNumberKey(evt)
      {


         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
{
alert("hi");
document.getElementById( "out" ).innerText="plz etr number";

                     return false;


         return true;
      }

}


</script>
</head>
<body>
<form name="f1" id="f1"><input type="button" value="Add" onclick="addRow('datatable')">
<div id="out"></div>
<table id="datatable" cellspacing="0" border="1">
<th>phoneno</th>
<th></th>
<tbody>
<tr>
<td><input type="text" id="txtChar"
 onkeypress="return isNumberKey(event)" name="txtChar"></td>
<td><input type="text"></td>
<td><textarea rows="1" cols="20"></textarea></td>
</tr>
</tbody>
</table>
</form>
</body>
</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"
    Last edited by Dormilich; Mar 18 '12, 10:00 AM. Reason: Please use [CODE] [/CODE] tags when posting code.
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      it’s not working because you do not trigger validation. on button press all you do is creating a new row.

        Comment

        • jayashree193
          New Member
          • Mar 2012
          • 2
          #3
          Code:
          <html>
<head>
<script LANGUAGE="JavaScript">
function addRow(tableID){
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
/*var element1 = document.createElement("input");
element1.type = "text";*/

[B]cell1.innerHTML="<input type='text' id='txtChar' onkeypress='return isNumberKey(event)' name='txtChar'>";[/B]//alert("cell1");
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";

cell2.appendChild(element2);
//alert("cell2");
var cell3 = row.insertCell(2);
var element3 = document.createElement("textarea");
element3.setAttribute("name","mytextarea");
element3.setAttribute("cols","20");
element3.setAttribute("rows","1");
cell3.appendChild(element3);
//alert("cell3");
}

 function isNumberKey(evt)
      {


         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
{
alert("hi");
document.getElementById( "out" ).innerText="plz etr number";

                     return false;


         return true;
      }

}


</script>
</head>
<body>
<form name="f1" id="f1"><input type="button" value="Add" onclick="addRow('datatable')">
<div id="out"></div>
<table id="datatable" cellspacing="0" border="1">
<th>phoneno</th>
<th></th>
<tbody>
<tr>
<td><input type="text" id="txtChar"
 onkeypress="return isNumberKey(event)" name="txtChar"></td>
<td><input type="text"></td>
<td><textarea rows="1" cols="20"></textarea></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
          Is there any alternate solution instead of using innerHTML for cell1" to make validation for 2nd row?
          Last edited by Dormilich; Mar 18 '12, 08:11 PM. Reason: Please use [CODE] [/CODE] tags when posting code.

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694
              #4
              the highlighted code only creates a text field, nothing more.

                Comment

                Previous template Next
                Working...