單選按鈕無法通過Ajax發送正確的值

我有一組單選按鈕列出學校中所有可用的成績。 onchange事件觸發一個Ajax請求，返回該特定等級的所有可用主題，並將它們顯示在列表框中。不幸的是，它總是返回組中第一個單選按鈕的值。除了錯誤的單選按鈕值被傳遞之外，其他所有東西仍然有效。單選按鈕無法通過Ajax發送正確的值

如果我使用另一個列表框而不是單選按鈕，該過程完美地工作。

我覺得我失去了明顯的出血，但我看不到什麼。任何建議感激地收到。

<html> 
<body> 
<script language="javascript" type="text/javascript"> 
<!-- 
function ajaxFunction(sender){  
    var ajaxRequest; 
    ajaxRequest = new XMLHttpRequest(); 
    ajaxRequest.onreadystatechange = function(){ 
     if(ajaxRequest.readyState == 4){ 
      var ajaxDisplay = document.getElementById(sender + "div"); 
      ajaxDisplay.innerHTML = ajaxRequest.responseText; 
     } 
    } 
    // Now get the value from user and pass it to the server script. 
    var grade = document.getElementById(sender).value; //works 
    var queryString = "?grade=" + grade + "&subject=" + sender; 
    ajaxRequest.open("GET", "process_ajax_7.php" + queryString, true); 
    ajaxRequest.send(null); 
} 
//--> 
</script> 
    <form action="process.php" method="get" name="myform"> 
     <label><input type="radio" id = "subject1" name="subject1" onclick=ajaxFunction('subject1'); value="09">Grade 9</label> 
     <label><input type="radio" id = "subject1" name="subject1" onclick=ajaxFunction('subject1'); value="10">Grade 10</label> 
     <label><input type="radio" id = "subject1" name="subject1" onclick=ajaxFunction('subject1'); value="11">Grade 11</label> 
     <label><input type="radio" id = "subject1" name="subject1" onclick=ajaxFunction('subject1'); value="12">Grade 12</label> 
     <br><br> 
     <select id="subject2" name="subject2" onchange=ajaxFunction('subject2');> 
      <option> </option> 
      <option value="09"> Year 9 </option> 
      <option value="10"> Year 10 </option> 
      <option value="11"> Year 11 </option> 
      <option value="12"> Year 12 </option> 
      <option value="00"> Electives </option> 
     </select> 
    </form> 
    <div id='subject1div'>First results will display here</div><br><br><br><br><br><br><br><br><br><br><div id='subject2div'>Second results will display here</div> 
</body> 
</html>

來源

2016-08-01 Crookers

所有的ID是一樣的 - 這是不是在HTML貓 - 改變他們獨特的東西，並用它在onclick –

更改ID，以subject1，subject2等，但仍然無法正常工作。 – Crookers

顯示您的更新代碼 –

這裏的變化我會想辦法讓你的代碼

在onclick，通過this作爲參數
在ajaxFunction使用sender.name和sender.value得到的主題和同比分別
使用xhr.onload而不是陳舊的onreadystatechange - 但不確定哪些版本的IE支持xhr2

所以它結束了這樣

<html> 
<body> 
<script language="javascript" type="text/javascript"> 
function ajaxFunction(sender){  
    var ajaxRequest = new XMLHttpRequest(); 
    ajaxRequest.onload = function(){ 
     var ajaxDisplay = document.getElementById(sender.name + "div"); 
     ajaxDisplay.innerHTML = ajaxRequest.responseText; 
    } 
    // Now get the value from user and pass it to the server script. 
    var queryString = "?grade=" + sender.value + "&subject=" + sender.name; 
    ajaxRequest.open("GET", "process_ajax_7.php" + queryString, true); 
    ajaxRequest.send(null); 
} 
</script> 
    <form action="process.php" method="get" name="myform"> 
     <label><input type="radio" id = "subject1" name="subject1" onclick=ajaxFunction(this); value="09">Grade 9</label> 
     <label><input type="radio" id = "subject2" name="subject1" onclick=ajaxFunction(this); value="10">Grade 10</label> 
     <label><input type="radio" id = "subject3" name="subject1" onclick=ajaxFunction(this); value="11">Grade 11</label> 
     <label><input type="radio" id = "subject4" name="subject1" onclick=ajaxFunction(this); value="12">Grade 12</label> 
     <br><br> 
     <select id="subject2" name="subject2" onchange=ajaxFunction('subject2');> 
      <option> </option> 
      <option value="09"> Year 9 </option> 
      <option value="10"> Year 10 </option> 
      <option value="11"> Year 11 </option> 
      <option value="12"> Year 12 </option> 
      <option value="00"> Electives </option> 
     </select> 
    </form> 
    <div id='subject1div'>First results will display here</div><br><br><br><br><br><br><br><br><br><br><div id='subject2div'>Second results will display here</div> 
</body> 
</html>

來源

2016-08-01 23:14:35

中的主題參數，這很好用 - 非常感謝。 – Crookers

單選按鈕無法通過Ajax發送正確的值

回答

相關問題