Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Answers Viewqa HTML how to validate values in the dynamically created textboxes?

Have Programming Question? Ask it here!
 
 
 


Sujitha
how to validate values in the dynamically created textboxes?
1 Answer(s)      a year and a month ago
Posted in : HTML


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>


Advertisement
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>


Related Tutorials/Questions & Answers:
Advertisements
 

 

 

DMCA.com