javascript function inside loop not working

Question

I am displaying online users. When I click one of the user, corresponding user should be displayed in the text box below. I am using javascript for this, but it is taking only the first user. When I click the second user, first user is displayed in the below text box. Why is it taking only the first array?

<?php
    foreach($query as $row)
    {
    ?>
        <input type="text" name="user" id="user" value="<?php echo $row->users;?> onclick="select_online()">
<?php
    }
    ?>
    <script>

    function select_online()
    {
        var user=document.getElementById("user").value;
        document.getElementById("usersonline").value=user;
    }
    </script>


Name:<input type="text" name="usersonline" id="usersonline">

Answer 1

First of all, using the same id for many elements is a mistake. You should make diverse id attribute for generated inputs.

Second, you should use this to get the value of the current element:

function select_online()
{
    var user=this.value;
    document.getElementById("usersonline").value=user;
}

document.getElementById("user") statement will always select the element which id attribute is equal to "user" and it will always be the same. Most probably, that is not what you want. If I understood you correctly, you want to get value of the clicked element, so as I mentioned before, you can achieve it using this expression, which points to the currently clicked element.

Answer 2

You should give a unique name to your inputs. You cannot reuse id="user" multiple times or javascript will not be able to find each input element.

The following would be better:

<?php
    $id = 0;
    foreach($query as $row) {
        $id += 1;
?>
<input type="text" name="user" id="user-<?php echo "$i"; ?>" value="<?php echo $row->users;?> onclick="select_online(<?php echo "$i"; ?>)">
<?php
    }
?>

<script>
    // Move script outside loop
    function select_online(i) {
        var user = document.getElementById("user-" + i).value;
        document.getElementById("usersonline").value = user;
    }
</script>

Name:<input type="text" name="usersonline"id="usersonline">

Answer 3

As per the HTML standard, there should be unique id in a document. But in your case you are generating multiple input tags with id = user . Javascript's document.getElementById is able to get only element with id = user .

For this you can change your code like this:

<?php foreach($query as $row) {  ?>
    <input type="text"   name="user"  id="user"   value="<?php echo $row->users;?>" onclick="select_online(this)">
<?php } ?>
<script> 
function select_online(elm) {
    var user=elm.value;
    document.getElementById("usersonline").value=user;
}
</script>
Name:<input type="text" name="usersonline"id="usersonline">

Here onclick, we are passing the refferance of the input tag. So we can get the refferance of the clicked input.

Answer 4

 <input type="text" name="user" id="user" value="<?php echo $row->users;?> onclick="select_online()">

You are setting id as user for all the users so when you use selector document.getElementById("user"), it always fetches the first row.

Never use same id for more than one element. It will always cause bugs.