2014-10-28 8 views
-2

여기에서 어디로 가야할 지 막혔습니다. 라디오 버튼에서 선택한 버튼의 값을 반환하고 싶습니다. 하지만 지금은 첫 번째 항목의 값만 반환합니다. 어떻게 모든 값을 반복 할 수 있을까요? 여기에 제 코드가 있습니다.선택 라디오 버튼

<!DOCTYPE html> 
<html> 
<body> 
    <?php include 'db_connector.php'; 
     $result = mysqli_query($con,"SELECT name FROM os_scope"); 
     while($row = mysqli_fetch_array($result)) { 
      $row['name']; 
      echo "<input type='radio' name='os' value=".$row['name']." id='myRadio'>"; 
     } 
    ?> 

    <p>Click the "Try it" button to display the value of the radio button.</p> 
    <button onclick="myFunction()">Try it</button> 
    <p id="demo"></p> 

    <script> 
     function myFunction() { 
      var x = document.getElementById("myRadio").value; 
      document.getElementById("demo").innerHTML = x; 
     } 
    </script> 
</body> 
</html> 
+4

ID를 문서의 컨텍스트에서 고유해야합니다 ... –

답변

1
<script> 
    function myFunction() { 
     var x = document.getElementsByName('os'); 
     var rate_value; 
     for(var i = 0; i < x.length; i++){ 
      if(x[i].checked){ 
       rate_value = x[i].value; 
       break; 
      } 
     } 
     document.getElementById("demo").innerHTML = rate_value; 

    } 
</script> 

+0

OMG 정말 고마워요, 제가 원했던대로 정확하게 작동했습니다. – Annie

+0

위의 코드를 사용하여 mysql 쿼리를 작성하기 위해 반환 된 id 값을 어떻게 사용할 수 있습니까? SELECT * FROM os where scope = 'id'; – Annie

1

이 시도 : 이름 = "OS"모든 라디오 버튼을 반복하고 checked이 속성을 true시킨 일 확인.

참고 - id은 항상 고유해야하므로 다른 라디오 버튼에 대해 다른 id을 사용해야합니다.

function myFunction() { 
    var radiobutton = document.getElementsByName("os"); 
    var x = ''; 
    for(var i=0;i<radiobutton.length;i++) 
    { 
     if(radiobutton[i].checked) 
     x = radiobutton[i].value; 
    } 
    document.getElementById("demo").innerHTML = x; 
} 
+0

당신이 나에게 얼마나 많은 도움 아무 생각이 없다, 정말 감사합니다 . – Annie

+0

도와 드리겠습니다 :) –

+0

반환 된 id 값을 사용하여 위 코드를 사용하여 mysql 쿼리를 작성하려면 어떻게해야합니까? 뭔가가 ... SELECT * FROM os WHERE scope = 'id' 'id'는 라디오 버튼의 반환 값입니다. 어떤 도움도 크게 받으실 것입니다. – Annie

1

첫 번째 : 요소 ID는 uniquiue id='myRadio'이어야하며 루프는 고유하지 않아야합니다.

난 (대신 id의) classjQuery를 이용한 제안은 (자바 스크립트 셀렉터 등-CSS 위해)

function getSelectedRadioValue() { 
 
    alert($('.myRadio:checked').first().val()); 
 
}
<html> 
 

 
<head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <input type='radio' name='os' value="1" class='myRadio'>1 
 
    <input type='radio' name='os' value="2" class='myRadio'>2 
 
    <input type='radio' name='os' value="3" class='myRadio'>3 
 

 
    <p>Click the "Try it" button to display the value of the radio button.</p> 
 
    <button onclick="getSelectedRadioValue()">Try it</button> 
 
    <p id="demo"></p> 
 

 
</body> 
 

 
</html>

AJAX 예

아약스는 synchronious 서버 인 호출하고 웹 사이트에서 jquery에서 사용할 수있는 데이터를 반환합니다. 예를 들어 :

function sendMessage() { 
 

 
    $.post("your url to serverside script you want to execute.php" 
 
    , { 'Index': 'Data Found in $_Post'} //in execute.php $_POST['Index'] will now contain: 'Data Found in $_Post' 
 
    , function(data) { 
 
    //in data will be the stuff you echo-ed in your php script (if you used json_encode($data) in php this will be automatically detected and converted to a javascript object. 
 
    $("$body").html(data); //for instance we get html from the AJAX call (execute.php) and insert in the #body div 
 
    }).fail(function(){ 
 
    alert('The server returned an error'); //ofcourse server returns an error, because URL used in this example does not exist 
 
    }); 
 

 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="body"> 
 

 
</div> 
 

 
<button onclick="sendMessage()">execute AJAX call</button>

+0

정말 고맙습니다. 정말 감사드립니다. – Annie

+0

위의 코드를 사용하여 mysql 쿼리를 작성하기 위해 반환 된 id 값을 어떻게 사용할 수 있습니까? 뭔가가 ... SELECT * FROM os WHERE scope = 'id' 'id'는 라디오 버튼의 반환 값입니다. 어떤 도움도 크게 받으실 것입니다. – Annie

+0

양식을 제출하거나 AJAX를 사용하십시오. (PHP로 서버 측에서 수행) –