AJAX单选按钮不起作用
好吧,我有一对单选按钮将它们的值存储到数据库中,以便在用户未来返回到网站时保留其状态。问题是,无论用户选择按钮1(like)还是按钮2(不喜欢),该值总是返回。任何人都可以帮我弄清楚为什么讨厌不被退回?AJAX单选按钮不起作用
这里是我的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;
?>
所以进入只存储 “喜欢” 没有哪个单选按钮被选中,此事基本上$改变选择应该改变存储的值,但这也不会发生。我错过了什么吗?
// 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'];
你忘记了我的代码需要将选定的值保存到数据库,所以它不足以让页面保持在自己的位置......我不明白这是为了将值存储到PHP中check.php上的变量... – Sweepster
在您的代码中,您引用了document.getElementById('entered')。value;然后你有两个输入相同的ID。因此它会选择1,您必须为第二个ID提供不同的ID,然后检查是否检查了第一个ID,然后使用该值,否则使用第二个值。 –
我更新了代码。 –
当您通过ID获取元素时,它只返回一个元素,哪一个元素是任意的,因为每个ID应该只有一个元素。相反,阅读检查的属性,找出哪个单选按钮被检查。
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;
}
}
这是一般不宜有一个单选按钮提交的东西,你应该让一个普通按钮。 – Maz
此外,您应该为您的站点添加CSRF保护,如果它将被部署。 – Maz
只允许用户选择喜欢或不喜欢,而不是两者。据我所知,只有单选按钮可以做到这一点。 – Sweepster