單擊按鈕後的動作單選按鈕

Question

我使用PHP MYSQL生成小型多頁測驗。我能夠顯示問題和單選按鈕選擇的答案（感謝來自Stackoverflow的幫助）。我遇到的問題是 - 只要用戶單擊單選按鈕，是否有辦法觸發某個操作？如果用戶選擇了錯誤的答案，我想立即給出反饋並說答案錯了，爲什麼錯了。如果用戶選擇了正確的答案，我想顯示正確的答案。

我已經看過$ _GET，$ _ POST和$ _REQUEST，但都需要「提交」的答案才能以PHP開始。只要用戶單擊單選按鈕，我就要開始操作（使用PHP源代碼）。

注：我已經看過幾個問題，似乎在上面使用jQuery。是否有可能沒有jQuery或Javascript？

感謝您的幫助。

Answer 1

是的，它是可能的，使用jQuery是服務器又名PHP代碼的響應最好的解決方案。

http://api.jquery.com/jQuery.ajax/

<?PHP 
if (!empty($_GET['action']) && $_GET['action'] == 'ajax_check') { 
    // I a final solution you should load here the answer of the question from database by name 
    $answers = array(
    'foo' => 1, 
    'baa' => 3, 
);  

    // Prepare and default answer in error case 
    $return = array(
    'message' => 'Invalud choise', 
); 

    if (isset($answers[$_GET['name']])) { 
    // If question/answer was found in database, check if users chouse is correct 
    if ($answers[$_GET['name']] == $_GET['value']) { 
     $return['message'] = 'Correct answer'; 
    } else { 
     $return['message'] = 'Wrong answer'; 
    } 
    } 

    // Return answer to java script 
    header('Content-type: text/json'); 
    echo json_encode($return); 
    die(); 
} 
?> 

Question 1 
<input type="radio" name="foo" value="1" class="question_radio" /> 
<input type="radio" name="foo" value="2" class="question_radio" /> 
<input type="radio" name="foo" value="3" class="question_radio" /> 
<input type="radio" name="foo" value="4" class="question_radio" /> 
<br /> 

Question 2 
<input type="radio" name="baa" value="1" class="question_radio" /> 
<input type="radio" name="baa" value="2" class="question_radio" /> 
<input type="radio" name="baa" value="3" class="question_radio" /> 
<input type="radio" name="baa" value="4" class="question_radio" /> 

<!-- Load jquery framework from google, dont need to host it by your self --> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    // When document was loadet succesfull 

    $(".question_radio").click(function() { 
     // Listen on all click events of all objects with class="question_radio" 
     // It is also possible to listen and input[type=radio] but this can produce false possitives. 

     // Start communication to PHP 
     $.ajax({ 
     url: "test.php", // Name of PHP script 
     type: "GET", 
     dataType: "json", // Enconding of return values ²see json_encode() 
     data: { // Payload of request 
      action: 'ajax_check', // Tel PHP what action we like to process 
      name: $(this).attr('name'), 
      value: $(this).val(), 
     } 
     }).done(function(data) { 
     // Procces the answer from PHP 
     alert(data.message); 
     }); 
    }); 
    }); 
</script> 

Answer 2

你必須考慮的事實是PHP運行在服務器端。有了這個說法，您只能將請求發送到服務器進行處理。這是「提交」操作或JQuery/JavaScript/Ajax調用，它們在本地運行，向服務器發出請求並更新頁面。所以要用PHP來做，你必須提交或使用本地腳本來打電話。

Answer 3

這可以用javascipt最好地完成（jQuery可能會更容易）。

1：設置點擊事件，當點擊一個單選按鈕時，將觸發一個動作：
http://api.jquery.com/click/

第二：當點擊被觸發，你建立一個AJAX調用的PHP文件，驗證輸入並返回結果：
http://api.jquery.com/jQuery.ajax/

其餘的由您決定。

Answer 4

如果您想在用戶選擇實際點擊提交按鈕之前驗證用戶的選擇，您需要使用onchange屬性爲要驗證的單選按鈕啓動ajax函數（帶參數），則ajax將然後得到從那裏你驗證了用戶的選擇，並返回結果。（如果你這樣做是正確的）

Answer 5

試試這個

 
$("input[type='radio'].your_radio_class").bind("change click", function(){ 
    // stopping user from changing the answer further depends on ui specification 
    // disabling radio 
    $("input[type='radio'].your_radio_class").each(function(){ 
     $(this).attr({"disabled":true,"readonly":"readoly"}); 
    }); 
    // else show loading graphics 
    $(this).parent().html("Loading answer...wait"); 
    // make ajax call 
    // fetch answer 
    // display answer 
});