AJAX radio buttons don't work
Alright so I have a pair of radio buttons that are to store their values into a database in order to retain their state when the user returns to the site in the future. The thing is, whether the user chooses button 1 (like) or button 2 (dislike) the value is always returned as like. Can anyone help me figure out why dislike isn't being returned?
Here is my 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开发者_StackOverflow社区){
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>
and this is 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;
?>
So basically $entered is only storing "like" no matter which radio button is selected and changing the selection should change the value stored, but that doesn't happen either. Am I missing something?
// HTML file:
<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 file:
<?php
echo 'ID selected: ' . $_GET['id'] . ' - Value selected: ' . $_GET['entered'];
When you get an element by an ID, it only returns one element, and which one is arbitrary because there should only be one element per ID. Instead, read the checked attribute to figure out which radio button is 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;
}
}
精彩评论