javascript從html檢索值

Question

我是javascript新手。 現在我想從html標簽中獲取價值（從數據庫中獲取價值）。 如果只有一條記錄可以從數據庫中獲取，那么我的代碼就可以工作了。 但是，如果有多個記錄，則沒有工作，只有第一個記錄起作用。

這是代碼 * 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>";
}

當用戶選擇哪個單選按鈕，然后單擊“信息”按鈕時，它將警告用戶的信息。

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

一旦用戶選擇或更改單選按鈕，我會將用戶的值轉移到保存最終結果的點（在我的php代碼中） 。

Javascript （當用戶更改單選按鈕時）

$('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;
    }
});

這是用戶單擊按鈕“立即信息”時的操作 ，我僅提醒名稱

$(".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);
});

此代碼僅更正從數據庫獲取的第一條記錄。 其他記錄，它無法獲取值。 您可以幫助將我的代碼修改或更改為正確的代碼嗎？

預先感謝。

Answer 1

這是因為您使用重復的ID值，所以元素的ID必須是唯一的。 在這種情況下，您需要對隱藏元素使用名稱而不是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='' />";

然后

$('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);
});