PHP HTML 表单 - 未提交 AJAX 更改

Question

我有一个简单的 HTML 表单，允许用户选择类型值。然后，他们可以根据选定的类型值从类别列表中进行选择。类别是基于类型的条件 - 当您选择类型时，将对数据库运行查询以选择匹配的类别并将它们显示为选择菜单。

就显示匹配的类别而言，这一切都很好，但是当我提交表单时，所选类别的值不是 HTTP 请求的一部分，因此不会将任何内容添加到数据库中。

这是 HTML 表单中的 2 个字段：

<div class="form-group">
        <label for="type" 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=""></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">
        <label for="category" 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=""></option>
                </select>
            </div>                  
    </div>

这是用户选择类型时调用的脚本：

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;
            }
            var status = xmlhttp.status == 200 ? 'success' : 'error'
            var group = document.getElementById("categoryList")
            group.classList.add(status)
        }
        xmlhttp.open("POST", "getPropertyCategories.php?type=" + str, true);
        xmlhttp.send();
    }

这可以很好地显示基于类型选择的条件类别选择菜单，但类别选择不包含在表单提交中。

getPropertyCategories.php 返回如下示例：

<select class="form-control" name="category" id="category">
 <option></option>
 <option value='Accommodation/Tourism'>Accommodation/Tourism</option>
 <option value='Automotive' selected='selected' >Automotive</option>
 <option value='Beauty/Health'>Beauty/Health</option>
 <option value='Education/Training'>Education/Training</option><option value='Food/Hospitality'>Food/Hospitality</option>
 <option value='Franchise'>Franchise</option><option value='Home/Garden'>Home/Garden</option>
 <option value='Import/Export/Whole'>Import/Export/Whole</option>
  </select>

Answer 1

更改选择菜单的 id 以匹配 javascript 中指定的 id - 反之亦然

            <select class="form-control" name="category" id="categoryList">
                <option value=""></option>
            </select>