?
Solved

validate dynamic textboxes

Posted on 2006-05-14
3
Medium Priority
?
459 Views
Last Modified: 2012-08-13
====================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add/Remove child: Javascript</title>
<script type="text/javascript">
<!--

function addEvent()
{
      var ni = document.getElementById('myDiv');
      var numi = document.getElementById('theValue');
      var num = (document.getElementById("theValue").value -1)+ 1;
      numi.value = num;
      var count = document.myForm.theValue.value;
      
      for(var i=0; i<count; i++)
      {
          var divIdName = "my"+i+"Div";
            var newdiv = document.createElement('div');
            newdiv.setAttribute("id",divIdName);
            newdiv.innerHTML = "VDN Identifier <input type=text name=btnVID"+i+" >&nbsp;Toll Free Phone Number <input type=text name=btnToll"+i+"><a href=\"javascript:;\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remove </a>";
            ni.appendChild(newdiv);
      }
}

function check(x)
{
//alert(x);
}
function removeEvent(divNum)
{
      var d = document.getElementById('myDiv');
      var olddiv = document.getElementById(divNum);
      d.removeChild(olddiv);
}

function chValidation()
{
      if (document.myForm.theValue.value < 0)
      {
            alert("Enter values greater than 0");
            document.myForm.theValue.focus();
            return false;
      }
      //

      document.myForm.method       = "post";
      document.myForm.action       = "insert.asp";
      document.myForm.submit();

}


//-->
</script>
</head>

<body onload=addEvent()>
<form name=myForm method=post>
      
<table align=center>
      <tr>
            <td>
                  Number of Records
            </td>
            <td>
                  <input type="hidden" value="0" id="theValue0" />
                  <input type=text value="1" name=theValue>      <input type=button name=Show value="Show" onclick="addEvent();"> <input type="button" value="Save" name="Save" onclick="chValidation()" >
            </td>
      </tr>
</table>
<br><div id="myDiv" align=center> </div>
</form>
</body>
</html>
=====================================

the above the is code. it accepts number of text boxes to generate. Then it generates as many it is keened.

I WANT TO  VALIDATE THE TEXTBOX IN JAVASCRIPT PLEASE REPLY ITS URGENT.

0
Comment
Question by:ven_ki
3 Comments
 
LVL 23

Expert Comment

by:basicinstinct
ID: 16677130
This code doesn't look like it works to me - for example, you call

document.getElementById('theValue');

But there is no element with an ID of 'theValue' in the code you have shown.  There is aone with a name of theValue, but Name != ID, and there is one with an ID of 'theValue0' but that is not the same as 'theValue'.  
0
 
LVL 17

Expert Comment

by:Cem Türk
ID: 16677203
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add/Remove child: Javascript</title>
<script type="text/javascript">
<!--

function addEvent()
{
     var ni = document.getElementById('myDiv');
     var numi = document.getElementById('theValue');
     var num = (document.getElementById("theValue").value -1)+ 1;
if(isNaN(num)) {
alert("Please enter a valid number");
return false;
}    
numi.value = num;
     var count = document.myForm.theValue.value;
     
     for(var i=0; i<count; i++)
     {
         var divIdName = "my"+i+"Div";
          var newdiv = document.createElement('div');
          newdiv.setAttribute("id",divIdName);
          newdiv.innerHTML = "VDN Identifier <input type=text name=btnVID"+i+" >&nbsp;Toll Free Phone Number <input type=text name=btnToll"+i+"><a href=\"javascript:;\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remove </a>";
          ni.appendChild(newdiv);
     }
}

function check(x)
{
//alert(x);
}
function removeEvent(divNum)
{
     var d = document.getElementById('myDiv');
     var olddiv = document.getElementById(divNum);
     d.removeChild(olddiv);
}

function chValidation()
{
     if (document.myForm.theValue.value < 0)
     {
          alert("Enter values greater than 0");
          document.myForm.theValue.focus();
          return false;
     }
     //

     document.myForm.method       = "post";
     document.myForm.action       = "insert.asp";
     document.myForm.submit();

}


//-->
</script>
</head>

<body onload=addEvent()>
<form name=myForm method=post>
     
<table align=center>
     <tr>
          <td>
               Number of Records
          </td>
          <td>
               <input type="hidden" value="0" id="theValue0" />
               <input type=text value="1" name=theValue>     <input type=button name=Show value="Show" onclick="addEvent();"> <input type="button" value="Save" name="Save" onclick="chValidation()" >
          </td>
     </tr>
</table>
<br><div id="myDiv" align=center> </div>
</form>
</body>
</html>
0
 
LVL 3

Accepted Solution

by:
trainsdse earned 200 total points
ID: 16687102
function chValidation()
{
     if (document.myForm.theValue.value < 0)
     {
          alert("Enter values greater than 0");
          document.myForm.theValue.focus();
          return false;
     }
     //

var ctls = document.getElementsByTagName("input");
   
//I'm looping backwards since the length property will
//change to a lower value every time I remove a control
    for(var i=ctls.length;i>-1;i--)
    {
        try{
        if(ctls[i].name.substring(0,6)=="btnVID")
        {
            //is a dynamic textbox so validate, I'll check
            //for empty and remove the parent div if empty
            if(ctls[i].value=="")
            {
                var myDiv = ctls[i].parentElement;
                myDiv.outerHTML = "";
            }
         }
         }catch(ex){}
     }
     document.myForm.method       = "post";
     document.myForm.action       = "insert.asp";
     document.myForm.submit();
}

//comment out the call to .submit() and you will see the blank box rows disappear
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
When you discover the power of the R programming language, you are going to wonder how you ever lived without it! Learn why the language merits a place in your programming arsenal.
With the power of JIRA, there's an unlimited number of ways you can customize it, use it and benefit from it. With that in mind, there's bound to be things that I wasn't able to cover in this course. With this summary we'll look at some places to go…
Starting up a Project

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question