Пытаюсь адаптировать ваш код под себя, но столкнулся с проблемой:
Браузер показывает следующую ошибку:
"VM3395:1 Uncaught SyntaxError: Unexpected token <
at XMLHttpRequest.HTTPReq.onreadystatechange"
Ошибка возникает на этой строке скрипта:
var Subcategories = eval("("+HTTPReq.responseText+")");
Мой файл с формой:
<?php include('head.php');
// Список категорий
$sql_cat = "SELECT DISTINCT category FROM expenses_cat";
$result_cat = $conn->query($sql_cat);
while($row_cat = $result_cat->fetch_assoc()) {
$category[] = $row_cat['category'];
} ?>
<form action="/scripts/add_expenses.php" method="post" name="add_expenses">
<fieldset>
<div class="row">
<label for="category">Категория*:</label>
<select name="category" required onchange="loadList(this)">
<option value="" selected="selected"></option>
<?php foreach ($category as $KEY => $category) { echo '<option value="' . $category . '">' . $category . '</option>' . "\n"; } ?>
</select>
</div>
<div class="row">
<label for="subcategory">Подкатегория*:</label>
<select name="subcategory" id="subcatList" disabled="disabled" required>
</select>
</div>
</fieldset>
<div class="button"><input id="button" type="submit" value="Добавить запись" /></div>
</form>
<script>
// Создаём объект асинхронной загрузки с сервера.
var HTTPReq = XMLHttpRequest ?
new XMLHttpRequest() :
new ActiveXObject("Microsoft.XMLHTTP");
// Устанавливаем обработчик ответа от сервера:
HTTPReq.onreadystatechange = function()
{
// Если загружено полностью:
if(HTTPReq.readyState == 4)
{
// Обрабатываем ответ:
var Subcategories = eval("("+HTTPReq.responseText+")");
// Заполняем список:
fillSubcatList(Subcategories);
}
}
// Запоминаем выбранную страну, чтоб не
// дублировать запросы в будущем.
var selectedCategory = null;
// Функция, вызываемая при изменении списка
// (при выборе страны)
function loadList(categoryList)
{
// Если выбран "пустой" вариант - очищаем список:
if(categoryList.value === "")
{
clearSubcatList();
return;
}
// Проверяем выбрана ли уже какая-то страна:
if(selectedCategory !== null)
{
// Если выбрана, проверяем не текущая ли выбрана:
if(selectedCategory == categoryList.value)
{
// Если текущая уже выбрана - делать нечего.
return;
}
}
// Если никакая не выбрана, или выбрана не текущая, ставим текущую.
selectedCategory = categoryList.value;
// Далее запрашиваем сервер на предмет списка городов выбранной страны.
// Тут должна быть ваша страница php, её работа будет описана далее:
HTTPReq.open("GET", "page.php?category="+categoryList.value);
HTTPReq.send(null);
// После этого будет вызван обработчик (который мы писали ранее, так что выходим)
return true;
}
// Фукнция, которая добавляет элементы в список подкатегорий:
function fillSubcatList(elements)
{
// elements передан в формате JSON, так что щас он - объект
// для начала очистим текущий список подкатегорий
clearSubcatList();
// Уберём статус неактивен с элемента:
var subcatList = document.getElementById("subcatList");
subcatList.disabled = false;
// Скидываем счётчик option'ов (1 - потому что первый элемент пуст)
var i = 1;
// Рассмотрим elements, в котором ключи это values, а значения - имена.
for(var key in elements)
{
// Создаём и добавляем элемент в список:
var Subcategory = new Option(elements[key], key, false, false);
subcatList.options[i++] = Subcategory;
}
// Всё.
return true;
}
// Функция, которая очищает все элементы из второго списка:
function clearSubcatList()
{
var subcatList = document.getElementById("subcatList");
// Такое очищение, походу, работает во всех браузерах нормально.
while (subcatList.length > 0) subcatList.options[0] = null;
subcatList.options[0] = new Option('', 0, false, false);
// Установим его в неактивный
subcatList.disabled = "disabled";
}
</script>
Файл-обработчик page.php в той же папке:
<?php
if(!array_key_exists('category', $_GET)) die();
include('/scripts/connect.php');
$query = "SELECT id, subcategory FROM expenses_cat WHERE category='" . $_GET['category'] . "' AND inmenu = 1";
$result = $conn->query($query);
$output = array();
while($row = $result->fetch_assoc())
{
$output[] = '"'.addslashes($row['id']).'": "'.
'"'.addslashes($row['subcategory']).'"';
}
if(sizeof($output) > 0)
{
echo '{'. implode(',', $output) .'}';
}
?>
Файл connect.php (с ним проблем нет)
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "u177653819_reg";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
Буду благодарен за помощь, в javascript я полный новичек...
