通過ajax爲php/mysql查詢發送複選框值

Question

我正在創建一個html表單並使用它的值來動態地過濾來自mysql數據庫的搜索結果。我有幾個下拉的和一個複選框字段的多個值，我無法獲得檢查值通過AJAX發送到我的PHP頁面。有沒有辦法根據這個複選框字段更新我的查詢結果，其方式與其他選擇字段相同？

HTML代碼：

<form name="searchForm"> 
    <input type="checkbox" name="services" value="twic" onclick="get_check_value()">TWIC</input><br/></li> 
    <input type="checkbox" name="services" value="enclosedTrucking" onclick="get_check_value()">Enclosed Trucking</input><br/> 
    <input type="checkbox" name="services" value="flatBedTrucking" onclick="get_check_value()">Flat Bed Trucking</input><br/> 
</form> 

Java腳本的：

<script type="text/javascript"> 
    function get_check_value() 
    { 
     var c_value = ""; 
     for (var i=0; i < document.searchForm.services.length; i++) { 
      if (document.searchForm.services[i].checked) 
      { 
       c_value = c_value + document.searchForm.services[i].value + "\n"; 
      } 
     } 
     return = c_value; 
     //alert(c_value); 
    } 
</script> 
<script language="javascript" type="text/javascript"> 
    //Browser Support Code 
    function ajaxFunction(){ 
     var ajaxRequest; // The variable that makes Ajax possible! 
     try{ 
      // Opera 8.0+, Firefox, Safari 
      ajaxRequest = new XMLHttpRequest(); 
     }catch (e){ 
      // Internet Explorer Browsers 
      try{ 
       ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
      }catch (e) { 
       try{ 
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
       }catch (e){ 
        // Something went wrong 
        alert("Your browser broke!"); 
        return false; 
       } 
      } 
     } 
     // Create a function that will receive data 
     // sent from the server and will update 
     // div section in the same page. 
     ajaxRequest.onreadystatechange = function(){ 
      if(ajaxRequest.readyState == 4){ 
       var ajaxDisplay = document.getElementById('results'); 
       ajaxDisplay.innerHTML = ajaxRequest.responseText; 
      } 
     } 
     // Now get the value from user and pass it to 
     // server script. 
     var os = document.getElementById('originState').value; 
     var c = document.getElementById('commodity').value; 
     var ds = document.getElementById('destState').value; 
     var ser = c_value; 
     var queryString = "?os=" + os ; 
     queryString += "&c=" + c + "&ds=" + ds + "&ser=" + ser; 
     //ajaxRequest.open("GET", "php/search2.php" + 
     //       queryString, true); 
     ajaxRequest.open("GET", "php/testqueries.php" + queryString, true); 
     ajaxRequest.send(null); 
    } 
</script> 

PHP接收這些變量：

$ser = $_GET['ser']; 

Answer 1

此使用jquery嘗試，

<script type="text/javascript"> 
    function get_check_value() { 
     var c_value = []; 
     $('input[name="services"]:checked').each(function() { 
      c_value.push(this.value); 
     }); 
     return c_value.join(','); 
    } 
    $('#btnSubmit').on('click', function() { 
     var os = $('#originState').val(); 
     var c = $('#commodity').val(); 
     var ds = $('#destState').val(); 
     var ser = get_check_value(); 
     var queryString = "os=" + os; 
     queryString += "&c=" + c + "&ds=" + ds + "&ser=" + ser; 
     $.ajax({ 
      url:'php/testqueries.php', 
      data:queryString, 
      sucess:function(data){ 
       $('#results').html(data); 
      } 
     }); 
     return false; // to prevent from page reload 
    }); 
</script> 

改變你的`HTML一樣，

<form name="searchForm"> 
    <input type="checkbox" name="services" value="twic" />TWIC 
    <br/> 
    <input type="checkbox" name="services" value="enclosedTrucking" />Enclosed Trucking 
    <br/> 
    <input type="checkbox" name="services" value="flatBedTrucking" />Flat Bed Trucking 
    <br/> 
    <input type="submit" id="btnSubmit" value="Submit" /> 
</form>