azhan
October 5, 2013, 7:40am
1
Hi guys,
I’m having a page called dependent list whereby HR department could update the employee’s dependent details. The page contain php generated input fields in a form.
I have a javascript function that could validate these field with unique ID (example: id=dependent_fullname_1) and the numbers at the end of every ID will be increase according to dependent sequence.
Problem: Let’s say PHP has found total 6 dependents for this employee, this javascript validation function only detect 5 dependent and assume the 6th field is not exist hence return the validation not functioning. If I hardcoded the maximum value of i to 5 dependent into for loops [ for (var i=0; i <= 5; i++)] then only the validation works.
Here’s the code, what i’m doing wrong?
function validate_updateForm()
{
var ttl_dpnt = document.getElementById('total_dependent').value; ////Grab total dependent
var real_val = ttl_dpnt-1; // Last value of variable i by PHP generated is i++ at the end of PGP while loop, the value of variable i always having extra 1
for (var i=0; i <= real_val; i++)
{
if(i==0){
i = 1;
}
var dependent_name = document.getElementById('dependent_fullname_' + i).value;
var dependent_dob = document.getElementById('dependent_dob_' + i).value;
var dependent_ic = document.getElementById('dependent_ic_' + i).value;
if( (dependent_name == '') || (dependent_dob == '') || (dependent_ic == '') ) {
alert('<?php echo LABEL_EMPTY_FIELD_FOUND_ERROR;?>');
return false;
}
else
{
var agree=confirm('<?php echo LABEL_CONFIRM_CONTINUE;?>');
if (agree)
return true ;
else
return false ;
}
My generated PHP&HTML code are
$i=1;
while(statement){
<input type="text" name="dependent_fullname_<? echo $i;?>" id="dependent_fullname_<? echo $i;?>" value="<? echo $dependent_fullname;?>" placeholder="<? echo LABEL_NAME;?>" /> <input type="hidden" id="dependent_id_<? echo $i;?>" name="dependent_id_<? echo $i;?>" value="<? echo $dependent_id;?>" />
</td>
<td align="center" width="201" class="Labelling"><input name="dependent_dob_<? echo $i;?>" type="text" id="dependent_dob_<? echo $i;?>" value="<? echo $dependent_dob;?>"/>
<br />
(dd/mm/yyyy)</td>
<td align="center" width="214" class="Labelling">
<label>
<input type="text" name="dependent_ic_<? echo $i;?>" id="dependent_ic_<? echo $i;?>" value="<? echo $dependent_ic;?>" placeholder="<? echo LABEL_IC_NUMBER;?>" onblur='checkNum(this)' />
</label>
}
$i++;
Please post the HTML code as your browser gets it (that is after the PHP code has been executed).
azhan
October 6, 2013, 2:51am
3
Hi Guido2004,
here’s the HTML code after PHP had generate it,
<form id="updateForm" method="post" action="link.php" onsubmit='return validate_updateForm();' enctype="multipart/form-data" />
<table width="57%" border="0" id="table-4" style="padding-left:5px">
<tr>
<td width="126" bgcolor="#CCCCCC" class="Labelling">Principle</td>
<td width="407" class="Labelling">Azhan Mohd Yusoff (861217-56-6211)</td>
</tr>
<tr>
<td bgcolor="#CCCCCC" class="Labelling">Spouse</td>
<td class="Labelling">Nurul (860201102236) - Employed</td>
</tr>
</table>
<p><span class="Labelling">Existing Dependent</span></p>
<table width="88%" border="0" id="dataTable" style="padding-left:5px">
<tr>
<td align="center" bgcolor="#CCCCCC" class="Labelling">No.</td>
<td align="center" bgcolor="#CCCCCC" class="Labelling">Dependent Name</td>
<td align="center" bgcolor="#CCCCCC" class="Labelling">Date of Birth</td>
<td align="center" bgcolor="#CCCCCC" class="Labelling">IC Number </td>
</tr>
<tr>
<td width="51">#1.<a href="link.php?a=r&did=765434321-141035345&uid=763454321" onclick="return confirm('Are you sure want to permanently delete this dependent from database?')"><img src="images/cross2.png" alt="remove" width="16" height="16" border="0" title="remove from list" /></a></td>
<td align="center" width="183" class="Labelling">
<input type="text" name="dependent_fullname_1" id="dependent_fullname_1" value="Danial" placeholder="Name" /> <input type="hidden" id="dependent_id_1" name="dependent_id_1" value="7654321-1410355" />
</td>
<td align="center" width="201" class="Labelling"><input name="dependent_dob_1" type="text" id="dependent_dob_1" value="06/04/2012"/>
<br />
(dd/mm/yyyy)</td>
<td align="center" width="214" class="Labelling">
<label>
<input type="text" name="dependent_ic_1" id="dependent_ic_1" value="123456789114" placeholder="IC Number" onblur='checkNum(this)' />
</label>
</td>
</tr>
<tr>
<td width="51">#2.<a href="link.php?a=r&did=765344321-144345800&uid=765434321" onclick="return confirm('Are you sure want to permanently delete this dependent from database?')"><img src="images/cross2.png" alt="remove" width="16" height="16" border="0" title="remove from list" /></a></td>
<td align="center" width="183" class="Labelling">
<input type="text" name="dependent_fullname_2" id="dependent_fullname_2" value="Aishah" placeholder="Name" /> <input type="hidden" id="dependent_id_2" name="dependent_id_2" value="7654321-1445800" />
</td>
<td align="center" width="201" class="Labelling"><input name="dependent_dob_2" type="text" id="dependent_dob_2" value="03/04/2014"/>
<br />
(dd/mm/yyyy)</td>
<td align="center" width="214" class="Labelling">
<label>
<input type="text" name="dependent_ic_2" id="dependent_ic_2" value="140603061224" placeholder="IC Number" onblur='checkNum(this)' />
</label>
</td>
</tr>
<tr>
<td width="51">#3.<a href="link.php?a=r&did=765434321-400334210&uid=763454321" onclick="return confirm('Are you sure want to permanently delete this dependent from database?')"><img src="images/cross2.png" alt="remove" width="16" height="16" border="0" title="remove from list" /></a></td>
<td align="center" width="183" class="Labelling">
<input type="text" name="dependent_fullname_3" id="dependent_fullname_3" value="saadiah" placeholder="Name" /> <input type="hidden" id="dependent_id_3" name="dependent_id_3" value="7654321-4003210" />
</td>
<td align="center" width="201" class="Labelling"><input name="dependent_dob_3" type="text" id="dependent_dob_3" value="01/04/2013"/>
<br />
(dd/mm/yyyy)</td>
<td align="center" width="214" class="Labelling">
<label>
<input type="text" name="dependent_ic_3" id="dependent_ic_3" value="123456789114" placeholder="IC Number" onblur='checkNum(this)' />
</label>
</td>
</tr>
<tr>
<td width="51">#4.<a href="link.php?a=r&did=765234321-470233660&uid=765234321" onclick="return confirm('Are you sure want to permanently delete this dependent from database?')"><img src="images/cross2.png" alt="remove" width="16" height="16" border="0" title="remove from list" /></a></td>
<td align="center" width="183" class="Labelling">
<input type="text" name="dependent_fullname_4" id="dependent_fullname_4" value="we" placeholder="Name" /> <input type="hidden" id="dependent_id_4" name="dependent_id_4" value="7654321-4703660" />
</td>
<td align="center" width="201" class="Labelling"><input name="dependent_dob_4" type="text" id="dependent_dob_4" value="8/9/2013"/>
<br />
(dd/mm/yyyy)</td>
<td align="center" width="214" class="Labelling">
<label>
<input type="text" name="dependent_ic_4" id="dependent_ic_4" value="787878787878" placeholder="IC Number" onblur='checkNum(this)' />
</label>
</td>
</tr>
<tr>
<td width="51">#5.<a href="link.php?a=r&did=765432321-329452389&uid=765423321" onclick="return confirm('Are you sure want to permanently delete this dependent from database?')"><img src="images/cross2.png" alt="remove" width="16" height="16" border="0" title="remove from list" /></a></td>
<td align="center" width="183" class="Labelling">
<input type="text" name="dependent_fullname_5" id="dependent_fullname_5" value="da" placeholder="Name" /> <input type="hidden" id="dependent_id_5" name="dependent_id_5" value="76542321-329423589" />
</td>
<td align="center" width="201" class="Labelling"><input name="dependent_dob_5" type="text" id="dependent_dob_5" value=""/>
<br />
(dd/mm/yyyy)</td>
<td align="center" width="214" class="Labelling">
<label>
<input type="text" name="dependent_ic_5" id="dependent_ic_5" value="121212121212" placeholder="IC Number" onblur='checkNum(this)' />
</label>
</td>
</tr>
<tr>
<td width="51">#6.<a href="link.php?a=r&did=765423321-501237064&uid=765234321" onclick="return confirm('Are you sure want to permanently delete this dependent from database?')"><img src="images/cross2.png" alt="remove" width="16" height="16" border="0" title="remove from list" /></a></td>
<td align="center" width="183" class="Labelling">
<input type="text" name="dependent_fullname_6" id="dependent_fullname_6" value="" placeholder="Name" /> <input type="hidden" id="dependent_id_6" name="dependent_id_6" value="7654321-5017064" />
</td>
<td align="center" width="201" class="Labelling"><input name="dependent_dob_6" type="text" id="dependent_dob_6" value="01/02/2013"/>
<br />
(dd/mm/yyyy)</td>
<td align="center" width="214" class="Labelling">
<label>
<input type="text" name="dependent_ic_6" id="dependent_ic_6" value="121212121212" placeholder="IC Number" onblur='checkNum(this)' />
</label>
</td>
</tr>
</table>
<p><br />
<input type="submit" name="updateDependent" id="updateDependent" value="Update" />
<input type="button" value="Cancel" onclick="window.close()" />
</form>