javascript getElementById repopulate for multiple rows

Question

I'm getting some stuff from the web formular using:

 echo "<tr>";
 echo "<td>" . $row['platform_name'] . "</td>";
 echo "<td><input name='id[]' type='hidden' value='".$row['id']."' /><input name='id_acc_ref[]' type='hidden' value='".$row['id_acc_ref']."' /><input name='platform_type[]' type='hidden' value='".$row['platform_type']."' /><input name='platform_name[]' type='hidden' value='".$row['platform_name']."' />Every <input id='scan_freq1' name='scan_freq1[]' type='number' style='width:50px;text-align:center' min='0' max='256' value='".$row['scan_frequency']."' placeholder='0000-00-00' /> week(s)</td>";
 echo "<td><input type='text' class='datepicker' name='first_scan_date1[]' style='text-align:center' value='".$row['first_scan_date']."' placeholder='0000-00-00' /></td>";
 echo "<td><input id='next_scan_date1' name='next_scan_date1[]' type='text' readonly='readonly' style='text-align:center' placeholder='".$row['next_scan_date']."' /></td>";
 echo "<td style='text-align:center'><img src='../images/ok.gif' id='save_conf1'></td>";
 echo "</tr>";

As you know, they're all arrays, that depends of the numbers of elements in the database. I've got some simple code, getting the result from the database and based on them, I'd like to make images visible in scope of that form (that submit button covers).

function test(resp)
  {
    if (resp == 1) 
    {
        document.getElementById('save_conf1').style.visibility = 'visible';
    }

But it does visible's me after update just the first element (image), no matter which I select, any ideas how to populate it for all?

Thanks in advice.

`id` must be unique. consider giving the objects the same class instead. — Rafael Herscovici, Dec 09 '12 at 21:20
What part don't you understand, "`id` must be unique" or "give the objects the same class"? These are basic, rudimentary concepts built in simple, plain language. — Charles, Dec 09 '12 at 21:25
@Pawel what Charles is saying is that 'id' is made to be unique. if you did a `document.getElementById('save_conf1')` and you had two elements with the id `save_conf1`, which one would it choose? It would get confused. By having a class, you can deem properties that are similar in many elements and apply those properties to all of them. It's just a matter of adding a `class="whatever"` to each of the elements you want to have those properties. — aug, Dec 09 '12 at 21:54

score 0 · Accepted Answer · edited May 23 '17 at 10:34

If each <img src=...> has a unique id (id='save_conf1', id='save_conf2', id='save_conf3', etc.) you can use a for loop -

function test(resp)
  {
    if (resp == 1) 
    {
        var max = ... //total number of <img src=...> with id='save_conf#'
        for (var i=1;i<=max;i++)
        { 
        document.getElementById('save_conf'+i).style.visibility = 'visible';
        }
    }

Another way to do it would be to use class and getElementByClassName.
ie. <img src=... class='save_conf'>

function test(resp)
  {
    if (resp == 1) 
    {
        document.getElementByClassName('save_conf').style.visibility = 'visible';

    }

Using getElementByClassName works on most modern browsers, but not on IE < 8. see also - stackoverflow.com/questions/1933602/how-to-getelementbyclass-instead-of-getelementbyid-with-javascript

javascript getElementById repopulate for multiple rows

1 Answers1