404 Not Found 404 Not Found - 7 months ago 10
Javascript Question

How to get information of field on click

i am creating loop for text box and dropdown box...

foreach ($users as $user)
{
echo '<div class="row">';
echo '<input type="hidden" value="'.$user['uid'].'" id="userid"/>';
echo '<input type="text" value="'.$user['username'].'" disabled id="username"/>';
echo '<select name="site" id="site"> <option>Site A</option><option>Site B</option></select>';
echo '<select name="role" id="role">';
foreach ($roles as $role)
echo '<option>'.$role.'</option>';
echo '</select>';
echo '<input type="button" name="Change" id="Change" value="Change" onclick="getClick()">';
}


my jquery is

function getClick()
{
var a=$("#username").val();
alert(a);
}


now problem is when i click on any change button i am getting username of first row only... how can i get username for each row...

Answer

You should use a class value instead of id because the elements are created within a loop - id of an element must be unique in a document.

So change all ids to class

'<input type="hidden" value="'.$user['uid'].'" class="userid"/>'

Also use jQuery event handlers instead of inlined one

'<input type="button" name="Change" value="Change" class="change">'

jQuery(function(){
    $('.change').click(function(){
        var $this = $(this), $row = $this.closest('.row');
        var a=$row.find(".username").val();
        alert(a);
    })
})