通過ajax添加單選按鈕到數據庫？

Question

當我測試我的表單時，它會將數據成功添加到我的數據庫表中，但單選按鈕選擇始終爲「未分組」，這是該組中的第一個單選按鈕。我試圖給他們獨立的ID，但在我的ajax.js文件我的函數使用此：

var group = encodeURI(document.getElementById('group').value); 

這意味着，現在我打電話並不存在的ID（我認爲是發生了什麼）。我該如何做到這一點，以便當我的ajax函數調用單選按鈕選擇時，爲了將它發送到我的php文件並將其添加到數據庫中，它會選擇正確的。

我希望這是有道理的，如果需要更多細節我可以添加更多。

這裏是我的形式，它是在一個PHP文件，因爲它必須是按我的任務（必須用AJAX調用）：

<!-- Include AJAX Framework --> 
<script src="ajax.js" language="javascript"></script> 

<?php $addContact = $_GET['addContact']; //index which sends new contact form to the html page via ajax function. 

//form which users can use to enter the details of a new contact to add to the database. 
echo "Add A Contact:"; 
echo "<form action='javascript:insert()' method='get'>"; 
echo "<table>"; 
echo "<tr>"; 
echo "<td>First Name:</td><td><input name='newFname' type='text' id='newFname' value='' size'20'></input></td>"; 
echo "</tr>"; 
echo "<tr>"; 
echo "<td>Last Name:</td><td><input name='newLname' type='text' id='newLname' value='' size'20'></input></td>"; 
echo "</tr>"; 
echo "<tr>"; 
echo "<td>Phone Number:</td><td><input name='newPhone' type='text' id='newPhone' value='' size'20'></input></td>"; 
echo "</tr>"; 
echo "<td>Email Address:</td><td><input name='newEmail' type='text' id='newEmail' value='' size'20'></input></td>"; 
echo "</tr>"; 
echo "<tr>"; 
echo "<td>Postal Address:</td><td><input name='newAddress' type='text' id='newAddress' value='' size'20'></input></td>"; 
echo "</tr>"; 
echo "<td>Group:</td><td><input type='radio' id='Ungrouped' name='group' value='Ungrouped'>No Group <input type='radio' id='Friends' name='group' value='Friends'>Friend"; 
echo "<input type='radio' id='Colleagues' name='group' value='Colleagues'>Colleagues <input type='radio' id='Family' name='group' value='Family'>Family"; 
echo "</table>"; 
//submit button that submits the contact information to an ajax function. 
echo "<input type='submit' name='Submit' value='Add Contact'/>"; 
echo "</FORM>"; 

這裏是連接到我的數據庫並保存我的PHP文件數據，將其與INSERT語句：

<!-- Include Database connections info. --> 
<?php include('config.php'); ?> 

<?php 

if(isset($_GET['newFname']) && isset($_GET['newLname']) && isset($_GET['newPhone']) && isset($_GET['newEmail']) && isset($_GET['newAddress']) && isset($_GET['group'])) 
{ 

    $newFname = $_GET["newFname"] ; 
    $newLname = $_GET["newLname"] ; 
    $newPhone = $_GET["newPhone"] ; 
    $newEmail = $_GET["newEmail"] ; 
    $newAddress = $_GET["newAddress"] ; 
    $group = $_GET["group"] ; 

    $insertContact_sql = "INSERT INTO `test`.`contacts` (`newFname`, `newLname`, `newPhone`, `newEmail`, `newAddress`, `group`) VALUES ('{$newFname}' , '{$newLname}' , '{$newPhone}' , '{$newEmail}' , '{$newAddress}' , '{$group}')"; 
    $insertContact= mysql_query($insertContact_sql) or die(mysql_error()); 

} 

else 
{ 
    echo 'Error! Please fill all fileds!'; 
} 

?> 

這裏是我的ajax（及其相關的Ajax代碼，還有其他功能（即調用我的形式到我的html頁面的功能），但他們不適用以解決這個問題）：

function createObject() 
{ 
    var request_type; 
    var browser = navigator.appName; 
    if(browser == "Microsoft Internet Explorer") 
    { 
     request_type = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    else  
    { 
     request_type = new XMLHttpRequest(); 
    } 

    return request_type; 
} 

var http = createObject(); 

//value solve an Internet Explorer cache issue 
var nocache = 0; 
function insert() 
{ 
    // Optional: Show a waiting message in the layer with ID login_response 
    document.getElementById('content02').innerHTML = "Just a second..." 
    // Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding. 
    var newFname= encodeURI(document.getElementById('newFname').value); 
    var newLname = encodeURI(document.getElementById('newLname').value); 
    var newPhone = encodeURI(document.getElementById('newPhone').value); 
    var newEmail = encodeURI(document.getElementById('newEmail').value); 
    var newAddress = encodeURI(document.getElementById('newAddress').value); 
    var group = encodeURI(document.getElementById('group').value); 

    // Set te random number to add to URL request 
    nocache = Math.random(); 
    // Pass the login variables like URL variable 
    http.open('get', 'newContact.php?newFname='+newFname+'&newLname=' +newLname+'&newPhone=' +newPhone+'& newEmail=' +newEmail+'&newAddress=' +newAddress+'&group=' +group+'&nocache = '+nocache); 
    http.onreadystatechange = insertReply; 
    http.send(null); 
    } 
    function insertReply() { 
    if(http.readyState == 4) 
    { 
     var response = http.responseText; 
     // else if login is ok show a message: "Site added+ site URL". 
     document.getElementById('content02').innerHTML = 'Your contact was successfully added!'+response; 
    } 
} 

Answer 1

你需要做的是循環所有的單選按鈕，並選擇一個已被檢查。然後，您可以在您的AJAX請求中爲該單選按鈕發送值。就像這樣：

var radios = document.getElementsByName('group'); 
    var selectedRadio = null; 
    for (var i = 0; i < radios.length; i++) { 
     if (radios[i].checked === true) { 
      selectedRadio = radios[i]; 
      break; 
     } 
    } 

    var group = encodeURI(selectedRadio.value); 

Answer 2

你可以試試jQuery來解決這個問題。

包括jQuery的在HTML中添加這一行到您的<head>部分：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 

然後用jQuery選擇來獲得你需要更換你的AJAX以下行的值文件

var group = encodeURI(document.getElementById('group').value); 

這些：

var groupValue = ($("input[name='group']:checked") != null) ? $("input[name='group']:checked").value : "NOT_CHECKED"; 
var group = encodeURI(groupValue); 

確保無線電輸入有財產name。忽視id，因爲它對於手頭的目的沒有用處。另外，當沒有按鈕被選中時（如果你不保留默認值），設置你自己的值。

您也可以在https://stackoverflow.com/a/2564019/772020閱讀。

請告訴我們是否有幫助。