0

私はjavascriptが初めてです。今、私はhtmlタグから値を取得したい(値はデータベースから取得)。データベースからフェッチするレコードが 1 つしかない場合、私のコードは機能します。ただし、複数のレコードがある場合、作業はなく、最初のレコードのみが機能します。

ここにコードがあります * 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);
});

このコードは、データベースから取得した最初のレコードのみを修正します。その他のレコードは、値を取得できません。私のコードを正しいものに修正または変更するのを手伝ってもらえますか?

少し早いですがお礼を。

4

1 に答える 1

0

重複した 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);
});
于 2013-11-04T03:07:42.120 に答える