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);
});

javascript从html中检索值

1 个答案: