How to validate dynamically generated input box with JavaScript

Question

Hi, I have a form which has an ajax function which appends the data when the user enters the code and selects a value from the combo box. Since the data which is appended has dynamic rows I want to validate those input boxes so that a user can only enter a value such as 01, 02, 03....10 and if the user tries to enter a value which is greater than 10 it should display an alert box. So far, I have the script which does that but since the name attribute keeps on changing the validation doesn't seem to work. Can anyone help me out please?

Here is my JavaScript code:

function getXMLHTTP() { //function to return the xml http object
  var xmlhttp = false;
  try {
    xmlhttp = new XMLHttpRequest();
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e1) {
        xmlhttp = false;
      }
    }
  }
  return xmlhttp;
}

function getfunit2(makhcode, cmbmon) {
  var strURL = "subjsele2.php?makhcode=" + document.nigran.makhcode.value + "&cmbmon=" + document.nigran.cmbmon.value;
  var req = getXMLHTTP();
  if (req) {
    req.onreadystatechange = function () {
      if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
          document.getElementById('suboth').innerHTML = req.responseText;
        } else {
          alert("There was a problem while using XMLHTTP:\n" + req.statusText);
        }
      }
    }
    req.open("POST", strURL, true);
    req.send(null);
  }
}

Here is my PHP code:

<?php
$makhcode=$_GET["makhcode"];

$cmbmon=$_GET["cmbmon"];
$monno1 = "mon$cmbmon";


$con = mysql_connect('localhost', '****', '*****');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("db", $con);

$scomp = mysql_query("SELECT * FROM subject WHERE compulsory !='1' ORDER BY ordby")or die(mysql_error());
if(mysql_num_rows($scomp)>0){
 echo "<table>";
   while($csub = mysql_fetch_assoc($scomp)){
         $msubjcode = $csub["code"];

         $csubqry = mysql_query("SELECT * FROM nigstat WHERE makhcode='".$makhcode."' AND subcode='".$msubjcode."'") or die(mysql_error());
         $fetchmon = mysql_fetch_array($csubqry) ;
         $mmonval =  $fetchmon["$monno1"];

    echo "<tr>";
    echo "<td width='200px'><font color='#FF0033'><strong>".$csub[name]."</strong></td><td><input id='s_id' name='s_$csub[code]' type='text' onkeypress=\"return chknum()\" size='1' maxlength='2' value='$mmonval'></td><input type='hidden' name='$mmonval' size='3' maxlength='3'>";
    echo "</tr>";

}


echo "</table>";
 }

mysql_close($con);
?>

Here is my HTML code:

    <table border ="0px" width="100%">

            <tr>
                <td align="right" width="58px"><label class="" for="element_1"><font size="3px"><b>Code</b></font></label></td><td><input id="makhcode" name="makhcode" onkeyup="showyear('makhsele.php?makh='+this.value); getfunit(); getfunit2();" type="text" maxlength="6" size="6" value=""/></td><td><label class="description" align="right" for="element_1">Month</label></td><td><select id="cmbmon" name="cmbmon" class="" onchange="getfunit(); getfunit2();" style="font-size:14px;">
                                <option value=""></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>

                </td>
            </tr>
   </table>
    <p style="border-bottom: 1px dotted #ccc;"></p>
    <div id="makhhint" style=""></div>
    <p style="border-bottom: 1px dotted #ccc;"></p><br />

    <table border="0px" width="100%" cellspacing="0" cellpadding="0">

      <th><div class="form_description"><h2>Compulsory Subjects</h2></div></th>      
      <th><div class="form_description"><h2>Other Subjects</h2></div></th>
      <tr>
      <td style="vertical-align: top;">
    <div id="subcomp" align="left" align="top" style="background-color: #99FFFF;border: 1px solid black;padding:10px;">

    </div>
      </td>
      <td style="vertical-align: top;">
  <div id="suboth" align="left" align="top" style="background-color: #FFFFCC;border: 1px solid black;padding:10px;">

    </div>

y do u relay on name use id instead.

Arun Killu
– Arun Killu

2013-02-21 05:13:32 +00:00
Commented Feb 21, 2013 at 5:13 — Arun Killu
– Arun Killu, Commented Feb 21, 2013 at 5:13
i am using id but even that is not working

kumail
– kumail

2013-02-21 05:14:09 +00:00
Commented Feb 21, 2013 at 5:14 — kumail
– kumail, Commented Feb 21, 2013 at 5:14
actually where you want to validate ? server or client?

Arun Killu
– Arun Killu

2013-02-21 05:15:42 +00:00
Commented Feb 21, 2013 at 5:15 — Arun Killu
– Arun Killu, Commented Feb 21, 2013 at 5:15

Arun Killu · Accepted Answer · 2013-02-21 05:56:22Z

1

use this function to validate code

<input type="text" id="fname" onkeyup="validate_code(this)">

 function validate_code(that)
 {

   if(isNaN(that.value)==true || that.value>10)
    {
        that.value='';
        alert('enter a valid value');
    }
     return true
  }

link to example validation example

edited Feb 21, 2013 at 5:56

answered Feb 21, 2013 at 5:23

Arun Killu

14.3k5 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

kumail Over a year ago

does it require to pass the parameters such as getelements by Id??

Arun Killu Over a year ago

which place do you want to validate ,and i suppose makhcode is the place you want to validate

kumail Over a year ago

i want to validate the input field which is generated in php file <input id='s_id' name='s_$csub[code]' type='text' onkeypress=\"return chknum()\" size='1' maxlength='2' value='$mmonval'></td><input type='hidden' name='$mmonval' size='3' maxlength='3'> this one

kumail Over a year ago

<SCRIPT language=Javascript> document.getElementById("s_1").onkeyup=function(){ var input=parseInt(this.value); if(input<0 || input>10) alert("Value should be between 0 - 10"); return; } </script> see i am usinh this to validate the input but somehow it is not working

kumail Over a year ago

so will this code be able to validate the dynamically generated textboxes??

|

Collectives™ on Stack Overflow

How to validate dynamically generated input box with JavaScript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related