Добавить выбор переключателя в базу данных через ajax?

Когда я тестирую свою форму, она успешно добавляет данные в мою таблицу базы данных, но выбор переключателя всегда «Разгруппирован», который является первым переключателем в группе. Я попытался дать им отдельные идентификаторы, но в моем файле ajax.js моя функция использует это:

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

Это означает, что теперь я вызываю идентификатор, который не существует (я думаю, что это происходит). Как я могу сделать так, чтобы когда моя функция 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-файл, который подключается к моей базе данных и сохраняет в ней данные с помощью оператора вставки:

<!-- 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;
    }
}

person Corey    schedule 07.03.2013    source источник
comment
Почему бы не использовать jQuery? Некоторые вещи становятся проще, ajax тоже.   -  person jtheman    schedule 08.03.2013
comment
Это выглядит связанным: stackoverflow.com/questions/8233308/   -  person Karl Keefer    schedule 08.03.2013
comment
Это для задания, поэтому я должен придерживаться этого пути.   -  person Corey    schedule 08.03.2013
comment
Можете ли вы опубликовать немного больше кода? Например, форма HTML и, возможно, полный код AJAX? Похоже, вам просто нужно убедиться, что ваш HTML-синтаксис верен, но с таким небольшим кодом трудно сказать.   -  person Jude Osborn    schedule 08.03.2013
comment
Я добавил соответствующий код для проблемы, спасибо за ваши ответы, но все еще ищу ответ!   -  person Corey    schedule 08.03.2013


Ответы (2)


Что вам нужно сделать, так это перебрать все переключатели и выбрать тот, который был проверен. Затем вы можете отправить значение только для этого переключателя в запросе 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);
person Jude Osborn    schedule 08.03.2013
comment
Большое спасибо, ваш код помог решить мою проблему. - person Corey; 08.03.2013

Вы можете попробовать 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.

Пожалуйста, сообщите нам, если это поможет.

person rdonatoiop    schedule 08.03.2013