How to validate dynamically generated input box with JavaScript - php

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>

Answer 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