Looping Javascript function in php

Question

I have a Javascript code that hides HTML elements based on a value in a check box. The checkbox and other elements are in tabular form which is populated by values from a database. This is an attendance register. The problem I have is that Javascript runs well for the first row but does run to the subsequent ones.

This is the Javascript:

<script language="JavaScript" type="text/javascript">
function initiallyHideElements() {
    var absent  = document.getElementById('emppresent').value;
    var reason  = document.getElementById('absentReason');
    var remarks = document.getElementById('remarks');
    var timein  = document.getElementById('timein');
    var timeout = document.getElementById('timeout');

    reason.style.visibility  = 'hidden';
    remarks.style.visibility = 'hidden';
    timein.style.visibility  = 'visible';
    timeout.style.visibility = 'visible';
}

function hideShowElements(){
    var absent  = document.getElementById('emppresent').value;
    var reason  = document.getElementById('absentReason');
    var remarks = document.getElementById('remarks');
    var timein  = document.getElementById('timein');
    var timeout = document.getElementById('timeout');

    if (absent == "Yes") {
        reason.style.visibility  = 'visible';
        remarks.style.visibility = 'visible';
        timein.style.visibility  = 'hidden';
        timeout.style.visibility = 'hidden';
    } else {
        reason.style.visibility  = 'hidden';
        remarks.style.visibility = 'hidden';
        timein.style.visibility  = 'visible';
        timeout.style.visibility = 'visible';
    }
}
</script>

Now here is the point of the loop.

<form action="processAttRegister.php" method="post" name="frmAttregister">
    <table width="95%" border="1" align ="center" cellpadding="0" cellspacing="0" id="projectOverview">
    <tr>
        <th width="72">Date</th>
        <th width="144">Name</th>
        <th width="46">Absent</th>
        <th width="143">Reason For Absence</th>
        <th width="42">Time In</th>
        <th width="42">Time Out</th>
        <th width="152">Remarks</th>
        <?php
            $atts = mysql_query("SELECT * FROM tblemployeedata WHERE grade>4 AND section=3");
            while($att = mysql_fetch_array($atts)) {
                echo '<script type="text/javascript">initiallyHideElements();</script>';
        ?>
        <tr id="projectlist">

            <td><input name="date" id="date"type="text" value="<?php echo date("d-m-Y");?>" readonly size="12"/></td>
            <td><input name="name" id="name"type="text" value="<?php echo $att["firstname"]." ".$att["surname"];?>" readonly /></td>
            <td>
                <div align="center">
                    <input name="emppresent" id="emppresent" type="checkbox" value="Yes" onclick="hideShowElements()"/>
                </div>
            </td>
            <td>
                <select name="absentReason" id="absentReason">
                <option value="value" selected="selected">-</option>
                <option value="Funeral">Attending Funeral</option>
                <option value="Sick">Sick</option>
                <option value="Other">Other</option>
                </select>

            </td>
            <td><input type="text" name="timein" id="timein" size="7"/></td>
            <td><input type="text" name="timeout" id="timeout" size="7"/></td>
            <td>
            <textarea name="remarks" id="remarks" cols="20" rows="3"></textarea>
            </td>
        </tr>
        <?php
            }
        ?>
        <tr>
            <td colspan="7">
            <div align="center">
            <input name="postAttendance" type="submit" id="postAttendance" value="Register Project" align="center" />
            </div>
            </td>
        </tr>
    </table>
</form>

You can't have different elements with the same id! Use classes, ids are unique per page. — John Lucabech, Feb 06 '14 at 21:00

Josh Harrison · Accepted Answer · 2014-02-07T13:46:14.450

You can only have one of any given ID on a page. Your loop is creating lots of duplicate IDs.

You could create a counter that increments with each loop iteration, and add the counter value to the ID attributes, causing them to be unique.

Modify JavaScript functions to have an argument count, and include it on the ID selectors:

<script language="JavaScript" type="text/javascript">
function initiallyHideElements(count) {
    var absent  = document.getElementById('emppresent' + count);
    var reason  = document.getElementById('absentReason' + count);
    var remarks = document.getElementById('remarks' + count);
    var timein  = document.getElementById('timein' + count);
    var timeout = document.getElementById('timeout' + count);

    reason.style.visibility  = 'hidden';
    remarks.style.visibility = 'hidden';
    timein.style.visibility  = 'visible';
    timeout.style.visibility = 'visible';
}

function hideShowElements(count){
    var absent  = document.getElementById('emppresent' + count);
    var reason  = document.getElementById('absentReaso' + count);
    var remarks = document.getElementById('remarks' + count);
    var timein  = document.getElementById('timein' + count);
    var timeout = document.getElementById('timeout' + count);

    if (absent.checked === false) {
        reason.style.visibility  = 'visible';
        remarks.style.visibility = 'visible';
        timein.style.visibility  = 'hidden';
        timeout.style.visibility = 'hidden';
    } else {
        reason.style.visibility  = 'hidden';
        remarks.style.visibility = 'hidden';
        timein.style.visibility  = 'visible';
        timeout.style.visibility = 'visible';
    }
}
</script>

Then, modify your PHP to include the unique $count as part of the element IDs, and as the argument for the JS function calls:

<form action="processAttRegister.php" method="post" name="frmAttregister">
    <table width="95%" border="1" align ="center" cellpadding="0" cellspacing="0" id="projectOverview">
    <tr>
        <th width="72">Date</th>
        <th width="144">Name</th>
        <th width="46">Absent</th>
        <th width="143">Reason For Absence</th>
        <th width="42">Time In</th>
        <th width="42">Time Out</th>
        <th width="152">Remarks</th>
        <?php

            // we'll increase this new variable by 1 on each loop,
            // to make sure it's always unique
            $count = 0; 

            $atts = mysql_query("SELECT * FROM tblemployeedata WHERE grade>4 AND section=3");
            while($att = mysql_fetch_array($atts)) {

                // increase the count variable by 1
                $count++;

                // $count is added inside each ID attribute below to ensure uniqueness.
        ?>
        <tr id="projectlist">

            <td><input name="date" id="date<?php echo $count; ?>" type="text" value="<?php echo date("d-m-Y");?>" readonly size="12"/></td>
            <td><input name="name" id="name<?php echo $count; ?>" type="text" value="<?php echo $att["firstname"]." ".$att["surname"];?>" readonly /></td>
            <td>
                <div align="center">
                    <input name="emppresent" id="emppresent<?php echo $count; ?>" type="checkbox" value="Yes" onclick="hideShowElements(<?php echo $count; ?>)"/>
                </div>
            </td>
            <td>
                <select name="absentReason" id="absentReason<?php echo $count; ?>">
                <option value="value" selected="selected">-</option>
                <option value="Funeral">Attending Funeral</option>
                <option value="Sick">Sick</option>
                <option value="Other">Other</option>
                </select>

            </td>
            <td><input type="text" name="timein" id="timein<?php echo $count; ?>" size="7"/></td>
            <td><input type="text" name="timeout" id="timeout<?php echo $count; ?>" size="7"/></td>
            <td>
            <textarea name="remarks" id="remarks<?php echo $count; ?>" cols="20" rows="3"></textarea>
            </td>
        </tr>
        <?php
                // pass count to the function.
                echo '<script type="text/javascript">initiallyHideElements(' . $count . ');</script>';

            }
        ?>
        <tr>
            <td colspan="7">
            <div align="center">
            <input name="postAttendance" type="submit" id="postAttendance" value="Register Project" align="center" />
            </div>
            </td>
        </tr>
    </table>
</form>

I have run the code as you have recommended but this line of code is not running. echo ''; — Wien Ambali, Feb 07 '14 at 07:52
Also the checkbox is not responding dynamically as intended. Its behaving in the opposite manner to the intended one. — Wien Ambali, Feb 07 '14 at 07:53
I have a feeling this should be on the onload attribute of an element but I just cannot figure out where. — Wien Ambali, Feb 07 '14 at 07:56
Try moving the script to the end of the loop, after the elements (echo it just before the `}`). This will ensure they are present when the script is called. As for the opposite checkbox effect, just change `true` to `false` in the if statement! — Josh Harrison, Feb 07 '14 at 08:46
Thank you very much repositioning the script has worked. Now the script that is executed upon clicking the checkbox is not running — Wien Ambali, Feb 07 '14 at 13:06
Ah, apologies - forgot to remove `.value` in the JS functions. See updated code — Josh Harrison, Feb 07 '14 at 13:47

Looping Javascript function in php

1 Answers1