validate dynamic textboxes

====================================
<!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.

ven_kiAsked:
Who is Participating?
 
trainsdseConnect With a Mentor Commented:
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
 
basicinstinctCommented:
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
 
Cem TürkSenior Software EngineerCommented:
<!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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.