Javascript function in PHP generated Table only works in Row 1

Question

I have a PHP generated table that shows x number of rows based upon the number of product that is expected for that particular order. The idea is that a user can input an order number and the script will validate the input text against what is expected a return a Pass or Fail status.

This works for row 1, but after that it will not validate any of the other rows.

Reading about I am pretty sure it is due to duplicate id's, so i created a auto increment row field in the database to serve as the id. However it is beyond my skill to set the id as the row number and then validate against the order number.

Table Code:

if (sqlsrv_num_rows($getres) > 0) {

    echo '<table cellpadding="0" cellspacing="0" class="db-table">';
    echo '<tr><th>Row</th><th>Works Order</th><th>Scan</th></tr>';
    echo 'T-Clip Scan: <br/>';
    echo '<br/>';

while ($add_info = sqlsrv_fetch_array($getres)){


    $row = ($add_info['row']);
    $worksorder = ($add_info['id']);



    print ("<tr> <td/> $row    <td/> $worksorder  
    <td/>


    <input id= 'worksorder' value='' />



    <p id='TR'></p>

        <script>
    document.getElementById('worksorder').onblur = function() {myFunction()};
    function myFunction() {
        var worksorder, test;
        worksorder = document.getElementById('worksorder').value;
        test = (worksorder == '".$_SESSION["worksorder"]."') ? 'PASS':'FAIL';
        document.getElementById('TR').innerHTML = test;
}
    </script>

    </tr>");


    }

Screenshot of issue

Any help it getting it to work for all rows is appreciated,

Thanks

the validation will happen while the user is typing or when he switches to another input box? — Ayush
– Ayush, Commented Mar 2, 2017 at 12:11
when they switch/focus is taken away. input method will be barcode scanning that will move onto the next line. This is working pretty well, at least for row 1 — Paul_846
– Paul_846, Commented Mar 2, 2017 at 12:15

Simba · Accepted Answer · 2017-03-02 12:18:11Z

The problem is likely because you're using creating <input id='worksorder'> and using document.getElementById('worksorder') to reference it within a loop.

HTML IDs are supposed to be unique on the page, so getElementById will only ever return a single element, that being the first element in the code that has the named ID.

If you want to do this in a loop, then you need to make sure that the ID for each element you generate is unique. Typically this would be done by adding the row ID to the generated HTML ID.

eg <input id= 'worksorder_{$add_info['id']}'> or similar, and then reference that in the JS code.

Alternatively, use an HTML class instead of an ID, since class names do not need to be unique, and then write your JS code to use document.querySelector() to query by classname instead of getElemenetById(). If you do it that way, then the JS code doesn't need to be in the loop, as it will be run once and apply to all the matching elements in one go.

Ayush · Accepted Answer · 2017-03-02 12:39:09Z

You don't have to use a separate script for every row. You can create a single script to hande all the rows.

Firstly, provide ids to the <tr> tag and the <input> tag to receive the values and add an onblur listener. You can use the autoincrementing column value for the ids that you get from database.

e.g.

echo "<tr> <td/> $row<td/> $worksorder  <td/> 
       <input id='".$id."' value='' /><p id='TR_'".$id."' onblur='myFunction(this)'></p>";

Also, add the onblur listener and pass the object to myFunction().

Then add a single myFunction() at the end.

<script>
function myFunction(param) {
      var worksorder, test, id;
      worksorder = param.value;
      id = param.id;
      console.log("order " +worksorder + ' '+id);
      test = (worksorder == '".$_SESSION["worksorder"]."') ? 'PASS':'FAIL';
      document.getElementById('TR_'+id).innerHTML = test;
};
</script>

This will handle all the rows for you. I hope it helps you.

Working JS fiddle

nikos.svnk · Accepted Answer · 2017-03-02 12:18:11Z

0

You are setting all the input fields with the same id. Html cannot handle same ids. You should either use incremental ids or use classes instead of ids, and adapt the JS function to use parameters, so not to have a JS function in every row. One function is enough and you can call it with the row number as parameter

answered Mar 2, 2017 at 12:18

nikos.svnk

1,3751 gold badge13 silver badges24 bronze badges

Collectives™ on Stack Overflow

Javascript function in PHP generated Table only works in Row 1

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related