How to get correct input value with $(“#inputid”).val()

Question

I have a list of items (echoed using PHP), and for each item I have a hidden input element. I'm trying to get the value of that input box using $("#inputid").val(). This sort of works, except it will only grab the first item's input, and not the second input value that I want.

PHP / HTML code:

<div class="container" id="main" style="display:table !important">
    <div class="row" id="posts_container">
    <?php
        foreach ($data as $item)
        {
            $username = $item->username;
            $followingData = new CirclesFriends();
            $temp = $followingData->areYouFollowingUser(Yii::app()->user->username, $username); 
            $areYouFollowingData = $temp->getData();
            $isFollowing = ""; 

            if (count($areYouFollowingData) > 0)
            {
                $isFollowing = "Unfollow";
            }
            else 
            {
                $isFollowing = "Follow";
            }

            echo "<input type='hidden' id='is_following' value='$isFollowing'></input>";
            echo "<button id='submit' class='btn' onClick='isFollowing()'>".$isFollowing."</button>";
        }
    ?>
    </div>
</div>

Here is where I get the selected input value (only returns the first one):

    function isFollowing()
    {
        var s =$("#is_following").val();
        alert(s);
    }

Why is this happening?

Answer 1

The problem is caused by using the same id in all loop iterations. Ids are unique identifiers, which in this case, are not unique.

One way of solving the issue is to concatenate a counter to your id and also pass it as a parameter to your isFollowing function.

This way you avoid duplicate ids.

Answer 2

In each loop you have same id for all hidden field which is wrong you should use different id for different field

    <div class="container" id="main" style="display:table !important">
        <div class="row" id="posts_container">
        <?php
            $a = 0;
            foreach ($data as $item)
            {
                $username = $item->username;
                $followingData = new CirclesFriends();
                $temp = $followingData->areYouFollowingUser(Yii::app()->user->username, $username); 
                $areYouFollowingData = $temp->getData();
                $isFollowing = ""; 

                if (count($areYouFollowingData) > 0)
                {
                    $isFollowing = "Unfollow";
                }
                else 
                {
                    $isFollowing = "Follow";
                }

                echo "<input type='hidden' id='is_following_".$a."' value='$isFollowing'></input>";
                echo "<button id='submit_".$a."' class='btn' onClick='isFollowing(this.id)'>".$isFollowing."</button>";
                 $a++;
            }
        ?>
        </div>
    </div>

Jquery would be:

 <script type="text/javascript" >
        function isFollowing(id)
        {
          idArray = id.split("_");
          id = idArray[1];
          var val = $("#is_following_"+id).val();
          alert(val);
        }
    </script>

Answer 3

You can take a counter variable in inside a PHP code and then concatenate it with hidden field ie id="is_following".$counter then in button onclick function also do pass this variable as parameter isFollowing($counter)

function isFollowing(id) {
    var s =$("#is_following"+id).val();
    alert(s);
}

I hope it may help you out

Thanks

Answer 4

I think it would be easier to use a class instead of an id.

For example, each input will have a class called "followers"

<input type='hidden' class = 'followers' value='$isFollowing'/>

That way when you use:

var array_followers = $('.followers');

It will give you back an array, so you can easily fetch it. For example, if you want access to the values of the first input in the array you will have to do:

var first_value = array_followers[0].val();
var also_first_value = $('.followers')[0].val();

You can do the same in a loop.

Hope it helps.