2015-10-18 120 views
0

我有一个简单的HTML表单,允许用户选择一个Type值。根据所选的类型值,他们可以从类别列表中进行选择。类别是基于类型的条件 - 当您选择类型查询是针对数据库运行以选择匹配的类别并将其显示为选择菜单。PHP HTML表单 - AJAX更改未提交

这一切运作良好,只要显示匹配的类别,但是当我提交表单值选定类别不是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> 
+0

哪里'形式'? – David

+0

您没有添加'category' –

+0

什么你到底是#categoryList的innerHTML设置为? – CBroe

回答

0

更改选择菜单的ID匹配在JavaScript中指定的ID - 反之亦然

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