how to validate values in the dynamically created textboxes?

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>

Ads









Related Tutorials/Questions & Answers:
how to validate values in the dynamically created textboxes?
How to Validate dynamically created text box in HTML using Javascript
Advertisements
dynamically how to change attiribute values in xml
how to validate all form field values at once.
how to get the values from dynamically generated textbox in java?
Accessing dynamically created variables inside a function
retrieving values from dynamically added textboxes in jsp - JSP-Servlet
dynamically created links id from mysql table is not getting
Store values of dynamically generated textboxes into database
how to retreive data dynamically from mysql to drop down list
how to validate the email login
how to access element added via javascript dynamically using jsp code
How to change the checkbox value dynamically.
Dynamically display values in dropdown box and then show the selected values as selected by the user which is already stored in the DB
How to change the data in the table dynamically ?
Dynamically display values in dropdown box and then show the selected values as selected by the user which is already stored in the DB
how to set the values in jsp
how to validate duplicate records in struts1
how to validate duplicate records in struts1
How many objects are created in the code below? Explain.
How to dynamically build a JSON object with Python
How to dynamically build a JSON object with Python
how to display selected checkboxes dynamically using jsp
how to validate national ID number
how to display the output of the newly created excel file
what is jvm instance, how is it created, how is related to thread?
How to read data dynamically from keyboard to array in flex
how to dynamically create one file with any example in php
How to display gridview details to labels dynamically?
how to add data dynamically from database into a dropdown list in a jsp
How to generate reports dynamically using ireports tool in a web application

Ads