how to validate values in the dynamically created textboxes?

Ads

 
 
 

Share on Google+Share on Google+

Sujitha
how to validate values in the dynamically created textboxes?
1 Answer(s)      4 years and 2 months 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>

Ads
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:
Advertisements
Tutorials   
Java Spring Hibernate Struts Training How to Word-wrap in an HTML table? I'm trying to pass counter data to another HTML page. How to display button as a link in vaadin? hi change navbar dropdown color in bootstrap How to remove the background color of bootstrap menu bar? How to change color of opened Bootstrap drop down toggle? Setting bootstrap container background color Help school all activities and admision process.. add one row after another date make a webpage HTMl HTMl Source code how to apply globalisation to a world wide asp.net application how to print HTML using javascript or Jquery How to recover from google panda update? How to survive google panda 4.0 update How to find if you have been hit by Panda 4.0 Design a web page using XHTML and JavaScript that does the followings: ffmpeg converting file mp4 to mov JavaScript How to Disable Catch-all Emails on CPanel z-index always on top What is Web hosting Database and HTML web development trainee Uploading files Image Gallery Image Gallery dropdown How to redirect from a HTML page? Easiest method for expiring the css and js headers HTML WITH AJAX VB 6 Read Web Page Header string palindrom using vbscript? html button How to add mod_deflate to apache without recompiling How to use place hoder in IE(version : 8) Html Software Question div align left css Fetching data from excel file on other website and display in interactive graph form where do I find the fix for tree view catalog not expanding and collapsing correctly for roseindia shopping cart 1.1 pass to next page to enter into a particular page only if the username,password and listbox value mtches hi Cricket stadium ticket booking design Need some help creating an order form.

Ads

 
Advertisement null

Ads