2015-10-18 118 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>