AJAX 单选按钮不起作用

Question

好了，所以我有一对单选按钮，将其值存储到数据库中，以便在用户将来返回网站时保留其状态。问题是，无论用户选择按钮1(喜欢)还是按钮2(不喜欢)，值总是返回like。谁能帮我弄清楚为什么不喜欢没有回复?

这是我的form.php:

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
var ajaxRequest;  // The variable that makes Ajax possible!
try{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
} catch (e){
    // Internet Explorer Browsers
    try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
        }
    }
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        var ajaxDisplay = document.getElementById('ajaxDiv');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }
}
var entered = document.getElementById('entered').value;
var queryString = "?entered=" + entered;
ajaxRequest.open("GET", "check.php" + queryString, true);
ajaxRequest.send(null); 
}
//-->
</script>
<form name="myform" action="check.php" method="post">
        <fieldset>
        <legend>Posts</legend>
<div id="post_1" class="post">
    <b>Post #1</b><br>
    Content of post #1<br>
    <p><input type="radio" id="entered" name="like_1" value="like" onclick="ajaxFunction();" onchange="ajaxFunction();" /><label for="like1a">Like</label></p> <p><input type="radio" id="entered" name="like_1" value="dislike" onclick="ajaxFunction();" onchange="ajaxFunction();" /><label for="like1b"> Dislike</label></p>
</div>
 </fieldset>
</form>
<div id='ajaxDiv'>Your result will display here</div>

，这是check.php:

<?php
// Retrieve data from Query String
$entered = $_GET['entered'];
// Escape User Input to help prevent SQL Injection
$entered = mysql_real_escape_string($entered);
echo $entered;
?>

所以基本上$enter只存储"like"，不管选择哪个单选按钮，改变选择应该改变存储的值，但这也不会发生。我错过什么了吗?

Answer 1

//HTML文件:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $('.button').click(function() {
        var valueSelected = this.value;
        var buttonSelected = this.id.replace(valueSelected + '_','');
        //alert('Button Selected: ' + buttonSelected + "nValue Selected: " + valueSelected);
        $.ajax({
            type: "GET",
            url: '/test.php?entered=' + valueSelected + '&id=' + buttonSelected,
            data:  '',
            cache: false,
            success: function(result) {
                $('#ajaxDiv').html(result);
            },
            error: function (response, desc, exception) {
                // custom error
            }
        });
    });
});
</script>
<fieldset>
<legend>Posts</legend>
    <div>
        <h1>Post #1</h1>
        <div>Content of post #1</div>
        <input type="radio" id="like_1" value="like" name="action1" class="button" /> <label for="like_1">Like</label>
        <br/>
        <input type="radio" id="dislike_1" value="dislike" name="action1" class="button" /> <label for="dislike_1">Dislike</label>
    </div>
    <div>
        <h1>Post #2</h1>
        <div>Content of post #2</div>
        <input type="radio" id="like_2" value="like" name="action2" class="button" /> <label for="like_2">Like</label>
        <br/>
        <input type="radio" id="dislike_2" value="dislike" name="action2" class="button" /> <label for="dislike_2">Dislike</label>
    </div>
</fieldset>
</form>
<div id="ajaxDiv">Your result will display here</div>

PHP文件:

<?php
echo 'ID selected: ' . $_GET['id'] . ' - Value selected: ' . $_GET['entered'];

Answer 2

当您通过ID获取元素时，它只返回一个元素，并且这个元素是任意的，因为每个ID应该只有一个元素。相反，请读取checked属性以确定选中了哪个单选按钮。

var entered=null;
var arr=document.getElementsByName("like_1");
for(var i=0;i<arr.length;i++){
    if(arr[i].checked){
        entered=arr[i].value;
        break;
    }
}