how to validate values in the dynamically created textboxes?

how to validate values in the dynamically created textboxes in HTML using javascript? Here s my code. Anyone plz help me. Thanks in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script language="javascript">
var n=1;
//FUNCTION TO REMOVE TEXT BOX ELEMENT
        function removeElement(el)
        {
            // while there are parents, keep going until reach TR
              while (el.parentNode && el.tagName.toLowerCase() != 'tr') 
              {
                 el = el.parentNode;
              }

          // If el has a parentNode it must be a TR, so delete it
          // Don't delte if only 3 rows left in table
          if (el.parentNode && el.parentNode.rows.length > 3) {
                el.parentNode.removeChild(el);
          }
        }
function addRows(){
var TABLE = document.getElementById('tableId');
var BODY = TABLE.getElementsByTagName('tbody')[0];
var TR1 = document.createElement('tr');

var TD1 = document.createElement('td');
TD1.setAttribute('id','td'+n);
    TR1.appendChild (TD1);
    var TD2 = document.createElement('td');
TD2.setAttribute('id','td'+n);
    TR1.appendChild (TD2);
    TD1.innerHTML = '<input type="text"  size = "20" maxlength= "20" name= pg_degree['+n+']>';
        TD2.innerHTML = '<input type="button" name=remove'+n+' value=Remove onClick=removeElement(this);>';

        BODY.appendChild(TR1);
n++;
 }
 function validate(form1)
 {
//What to code here
 }
 </script>
 </head>
 <body>
  <div align="center">
   <form name="form1" method="post" action="" onSubmit="return validate(this)">
    <table id="tableId" border="1">
     <tr>
      <td colspan="2"><div align="left"><strong>Post Graduate</strong></div></td>
     </tr>
    <tr>
     <td>Degree</td>
   </tr>
    <tr>
      <td><input name="pg_degree[0]" type="text"></td>
    <td><input type="button" name="add" value="ADD" onClick="addRows();"></td>
</table>
<p>
  <input name="submit" type="submit" id="submit" value="ADD">
</p>
</form>
</div>

View Answers

March 7, 2013 at 6:27 PM

hi friend,

check the code below, may this will be helpful for you

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script language="javascript">
var n=1;
//FUNCTION TO REMOVE TEXT BOX ELEMENT
function removeElement(el)
{
// while there are parents, keep going until reach TR
while (el.parentNode && el.tagName.toLowerCase() != 'tr') 
{
el = el.parentNode;
}

// If el has a parentNode it must be a TR, so delete it
// Don't delte if only 3 rows left in table
if (el.parentNode && el.parentNode.rows.length > 3) {
el.parentNode.removeChild(el);
}
}
function addRows(){
var TABLE = document.getElementById('tableId');
var BODY = TABLE.getElementsByTagName('tbody')[0];
var TR1 = document.createElement('tr');

var TD1 = document.createElement('td');
TD1.setAttribute('id','td'+n);
TR1.appendChild (TD1);
var TD2 = document.createElement('td');
TD2.setAttribute('id','td'+n);
TR1.appendChild (TD2);
TD1.innerHTML = '<input type="text" size = "20" maxlength= "20" 
name= pg_degree['+n+'] id= pg_'+n+'>';
TD2.innerHTML = '<input type="button" name=remove'+n+' value=Remove 
onClick=removeElement(this);>';

BODY.appendChild(TR1);
n++;
}
function validate(form1)
{
//Your code should be as follows
for(var i=0; i<=n; i++)
{
var str="pg_"+i;
var x=document.getElementById(str).value;
if (x==null || x=="")
{
alert("Text fielled must not be empty.");
return false;
}
}
}
</script>
</head>
<body>
<div align="center">
<form name="form1" method="post" action="#" onSubmit="return validate(this);">
<table id="tableId" border="1">
<tr>
<td colspan="2"><div align="left"><strong>Post Graduate</strong></div></td>
</tr>
<tr>
<td>Degree</td>
</tr>
<tr>
<td><input name="pg_degree[0]" type="text" id="pg_0"></td>
<td><input type="button" name="add" value="ADD" onClick="addRows();"></td>
</table>
<p>
<input name="submit" type="submit" id="submit" value="ADD">
</p>
</form>
</div>