javascript to retrive value from html

Question

I'm new to javascript. Now i want to get value from html tag (value get from database). If there is only one record that fetch from database, my code is work. But if there is more than one record, there is not work, only first record that work.

Here is code * PHP *

$sql = mysql_query("SELECT * FROM users"); //suppose, there are 5 records
while($row = mysql_fetch_array($sql)){
    //fetch value from db
    $u_name = $row['U_Name'];
    $u_gender = $row['Gender'];
    $u_email = $row['Email'];

    echo "<div class='loop'>";
        echo "<p><input type='radio' name='user' value='1' />Name</p>
              <p><input type='radio' name='user' value='2' />Gender</p>
              <p><input type='radio' name='user' value='3' />Email</p>";

    //user info
        echo "<div class='user_info'>";
            echo "<input type='hidden' class='u_name' value='$u_name' />";
            echo "<input type='hidden' class='u_gender' value='$u_gender' />";
            echo "<input type='hidden' class='u_email' value='$u_email' />";
        echo "</div>";

    //button
        echo "<div class='user_button'>";
            echo "<a style="text-decoration: none; color: #000000;"
                   class="button_action" id="button_action" href="#"
                   onclick="return false;">Info</a>";
        echo "</div>";                           

    //save final result
        echo "<input type='hidden' id='final_name' value='' />";
        echo "<input type='hidden' id='final_gender' value='' />";
        echo "<input type='hidden' id='final_email' value='' />";

    echo "</div>";
}

When user choose which radio button, and click on Info button, it will alert the the info of user.

if user choose radio Name and click button Info --> alert name of user
if user choose radio Gender and click button Info --> alert gender of user
if user choose radio Email and click button Info --> alert email of user

Once, user choose or change radio button, i will transfer the value of user to the point save final result (in my php code) .

Javascript (when user change radio button)

$('input[name=user]').bind('change', function(){
    var n = $(this).val();
    switch(n){
        case '1':
            var name = $(this).parents('.loop').find("u_name").val();
            document.getElementById("final_name").value = name;
            break;
        case '2':
            var gender = $(this).parents('.loop').find("u_gender").val();
            document.getElementById("final_gender").value = gender;
            break;
        case '3':
            var email = $(this).parents('.loop').find("u_email").val();
            document.getElementById("final_email").value = email;
            break;
    }
});

Here is action when user click on button Info now, i alert only name

$(".button_action").bind('click', function(){
    var u_name = $(this).parents('.loop').find("#final_name").val();
    var u_gender = $(this).parents('.loop').find("#final_gender").val();
    var u_email = $(this).parents('.loop').find("#final_email").val();
    alert(u_name);
});

This code correct only first record that fetch from database. Other records, it cannot get the value. Can you help to modify or change my code to the correct one?

Thank in advance.

Answer 1

It is because you are using duplicate id values, ID of an element must be unique. In this case you need to use name for the hidden elements instead of ID

    echo "<input type='hidden' name='final_name' value='' />";
    echo "<input type='hidden' name='final_gender' value='' />";
    echo "<input type='hidden' name='final_email' value='' />";

then

$('input[name=user]').bind('change', function () {
    var n = $(this).val(),
        $loop = $(this).closest('.loop');
    switch (n) {
        case '1':
            var name = $loop.find('input[name="u_name]').val();
            $loop.find('input[name="final_name]').val(name);
            break;
        case '2':
            var gender = $loop.find('input[name="u_gender]').val();
            $loop.find('input[name="final_gender]').val(gender);
            break;
        case '3':
            var email = $loop.find('input[name="u_email]').val().val();
            $loop.find('input[name="final_email]').val(email);
            break;
    }
});

$(".button_action").bind('click', function(){
    var $loop = $(this).closest('.loop');
    var u_name = $loop.find('input[name="final_name]').val();
    var u_gender = $loop.find('input[name="final_gender]').val();
    var u_email = $loop.find('input[name="final_email]').val();
    alert(u_name);
});