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">

Do you see the foreach result on your html ?

Pedro Lobito
– Pedro Lobito

2015-10-03 07:39:19 +00:00
Commented Oct 3, 2015 at 7:39 — Pedro Lobito
– Pedro Lobito, Commented Oct 3, 2015 at 7:39

Alexandr Lazarev · Accepted Answer · 2015-10-03 08:08:10Z

3

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.

edited Oct 3, 2015 at 8:08

answered Oct 3, 2015 at 7:39

Alexandr Lazarev

13k4 gold badges40 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

chriskelly · Accepted Answer · 2015-10-03 07:46:06Z

1

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">

edited Oct 3, 2015 at 7:46

answered Oct 3, 2015 at 7:37

chriskelly

7,7363 gold badges36 silver badges52 bronze badges

3 Comments

Alexandr Lazarev Over a year ago

select_online() wasn't defined in the loop, in the code provided by @manju. There is a bracket(<?php } ?>) that closes the loop just before the <script> tag.

chriskelly Over a year ago

@LazarevAlexandr : I know. I caught it already. I see you made an edit which resulted in a conflict. I have not had that before and I was not able to resolve it but I think it was the same edit I made. btw. your solution is better than mine.

chriskelly Over a year ago

Hang in there :) I'm leaving mine there because it demonstrates how you might make the id field unique. oh and you have my vote!

Alexandr Lazarev · Accepted Answer · 2015-10-03 08:42:35Z

1

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.

edited Oct 3, 2015 at 8:42

Alexandr Lazarev

13k4 gold badges40 silver badges47 bronze badges

answered Oct 3, 2015 at 7:42

Dinesh Patra

1,14512 silver badges23 bronze badges

Comments

brute_force · Accepted Answer · 2015-10-03 07:39:16Z

0

 <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.

answered Oct 3, 2015 at 7:39

brute_force

1,1717 silver badges13 bronze badges

Collectives™ on Stack Overflow

javascript function inside loop not working

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related