Skip to content

Instantly share code, notes, and snippets.

@steveshead

steveshead/index.html

Created July 3, 2021 14:44
Show Gist options
  • Save steveshead/80443e0e4f3575c26aa59d8f4e79b3a4 to your computer and use it in GitHub Desktop.
Save steveshead/80443e0e4f3575c26aa59d8f4e79b3a4 to your computer and use it in GitHub Desktop.
Download ZIP
[ Ajax - show sub-categories based on category selected ] - Use ajax to show the sub-categories based on the primary category selected
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/6b773fe9e4.js" crossorigin="anonymous"></script>
<title>Ajax Template</title>
<style>
#subcategory-select {
display: none;
}
</style>
</head>
<body>
<div class="container py-5">
<div class="row">
<div class="col-lg-6 mx-auto">
<div id="form">
<p>Which category are you interested in?</p>
<select class="form-select mb-3" id="category-select">
<option disabled selected>Please select</option>
<option value="1">Furniture</option>
<option value="2">Lighting</option>
<option value="3">Accessories</option>
</select>
<select class="form-select" id="subcategory-select">
</select>
</div>
</div><!-- end column -->
</div><!-- end row -->
</div><!-- end container -->
<script>
function updateSubcategories() {
var cat_select = document.getElementById("category-select");
var subcat_select = document.getElementById("subcategory-select");
var cat_id = cat_select.options[cat_select.selectedIndex].value;
var url = 'subcategories.php?category_id=' + cat_id;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
subcat_select.innerHTML = xhr.responseText;
subcat_select.style.display = 'inline';
}
}
xhr.send();
}
var cat_select = document.getElementById ("category-select");
cat_select.addEventListener("change", updateSubcategories);
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
Raw
subcategories.php
<?php
$categories = [
[
'id' => 1, 'name' => 'Furniture', 'subcategories' => [
['id' => 1, 'name' => 'Beds'],
['id' => 2, 'name' => 'Benches'],
['id' => 3, 'name' => 'Cabinets'],
['id' => 4, 'name' => 'Chairs & Stools'],
['id' => 5, 'name' => 'Consoles & Desks'],
['id' => 6, 'name' => 'Sofas'],
['id' => 7, 'name' => 'Tables']
]
],
[
'id' => 2, 'name' => 'Lighting', 'subcategories' => [
['id' => 1, 'name' => 'Ceiling'],
['id' => 2, 'name' => 'Floor'],
['id' => 3, 'name' => 'Table'],
['id' => 4, 'name' => 'Wall']
]
],
[
'id' => 3, 'name' => 'Accessories', 'subcategories' => [
['id' => 1, 'name' => 'Mirrors'],
['id' => 2, 'name' => 'Outdoor & Patio'],
['id' => 3, 'name' => 'Pillows'],
['id' => 4, 'name' => 'Rugs'],
['id' => 5, 'name' => 'Wall Decor & Art'],
]
]
];
$category_id = isset($_GET['category_id']) ? (int) $_GET['category_id'] : 0;
foreach($categories as $category) {
if($category['id'] == $category_id) {
// Code when this id matched requested id
$subcategories = $category['subcategories'];
foreach ($subcategories as $subcategory) {
echo "<option value =\"{$subcategory['id']}\">";
echo $subcategory['name'];
echo "</option>";
}
}
}
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment