2011-08-27 181 views
2

好吧,我有一對單選按鈕將它們的值存儲到數據庫中,以便在用戶未來返回到網站時保留其狀態。問題是,無論用戶選擇按鈕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; 
?> 

所以進入只存儲 「喜歡」 沒有哪個單選按鈕被選中,此事基本上$改變選擇應該改變存儲的值,但這也不會發生。我錯過了什麼嗎?

+0

這是一般不宜有一個單選按鈕提交的東西,你應該讓一個普通按鈕。 – Maz

+0

此外,您應該爲您的站點添加CSRF保護,如果它將被部署。 – Maz

+0

只允許用戶選擇喜歡或不喜歡,而不是兩者。據我所知,只有單選按鈕可以做到這一點。 – Sweepster

回答

4

// 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']; 
+0

你忘記了我的代碼需要將選定的值保存到數據庫,所以它不足以讓頁面保持在自己的位置......我不明白這是爲了將值存儲到PHP中check.php上的變量... – Sweepster

+0

在您的代碼中,您引用了document.getElementById('entered')。value;然後你有兩個輸入相同的ID。因此它會選擇1,您必須爲第二個ID提供不同的ID,然後檢查是否檢查了第一個ID,然後使用該值,否則使用第二個值。 –

+0

我更新了代碼。 –

0

當您通過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; 
    } 
} 
+0

你的代碼破壞了我的ajax。選擇一個單選按鈕帶來的頁面在瀏覽器中的空白check.php ... – Sweepster

+0

得到它的工作! – Sweepster

+0

問題:這對單選按鈕將附加到博客中的帖子。帖子ID由博客設置,因爲它們發佈在博客的循環中。單選按鈕將被命名爲 name =「like _ <?php the_ID();?>」 和 name =「dislike _ <?php the_ID();?>」 我無法獲取javascript以查找按鈕的名稱。 Shuld我將JavaScript放在循環中?這使我感到效率低下並且承受負擔。有沒有一種方法可以通過將JavaScript保存在標題中來使其工作? – Sweepster