I have 2 select menus on my form: Type and Category. When a user selects something from the Type menu I want it to then perform a PHP script which queries a database and returns a list of matching categories for the selected Type for them to choose from in the Category menu.
This is working well but I would now like to update it so that it adds a class to the categoryGroup ("success" or "error" depending on the AJAX result). Here's my table with the 2 cells:
<div class="form-group">
<label for="title" class="control-label col-sm-3">Type</label>
<div class="input-group col-xs-8">
<select class="form-control" name="type" id="type" onchange="getCategories(this.value)">
<option value="" selected></option>
<option value="Business">Business</option>
<option value="Commercial">Commercial</option>
<option value="Commercial Land">Commercial Land</option>
<option value="Land">Land</option>
<option value="Rental">Rental</option>
<option value="Residential">Residential</option>
<option value="Rural">Rural</option>
</select>
</div>
</div>
<div class="form-group" id="categoryGroup">
<label for="title" class="control-label col-sm-3">Category</label>
<div class="input-group col-xs-8" class="" id="categoryList">
<select class="form-control" name="category" id="category">
<option value="" selected></option>
</select>
</div>
</div>
and here's my script that's working to replace the Category select menu with the appropriate options from the AJAX call:
<script type="text/javascript">
function getCategories(str) {
if (str == "") {
document.getElementById("categoryList").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("categoryList").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "getPropertyCategories.php?type=" + str, true);
xmlhttp.send();
}
</script>
I can't work out how to update this to also add a class to the categoryGroup id