SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript Validation did not working for php generated input field

    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.
    (whereby PHP will search the array of dependent list in the database then display it within HTML input field value and each field separated using unique increased variable i value at the end of each ID of input field, example: id=dependent_fullname_1)

    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?

    Code JavaScript:
    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

    Code HTML4Strict:
    $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++;

  2. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,496
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Please post the HTML code as your browser gets it (that is after the PHP code has been executed).

  3. #3
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Guido2004,

    here's the HTML code after PHP had generate it,

    Code:
    <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" />
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" value="Cancel" onclick="window.close()" />
      </form>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •