자바 스크립트를 통해 HTML에서 가치 검색

Question

저는 (는) 자바 스크립트를 처음 사용했습니다. 이제 html 태그 (데이터베이스에서 얻을 값)에서 가치를 얻고 싶습니다. 데이터베이스에서 가져 오는 레코드가 하나뿐이면 내 코드가 작동합니다. 그러나 하나 이상의 레코드가있는 경우 작업이 없으며 첫 번째 레코드 만 작동합니다. 여기

은 사용자가있는 라디오 버튼을 선택하고 정보 버튼을 클릭하면, 사용자의 '정보를 알려줍니다 *

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

코드 * PHP입니다.

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 코드에서) 최종 결과 저장 점 에 대한 사용자의 값을 전송합니다.

자바 스크립트 (시 사용자 변경 라디오 버튼)

다음

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