通过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>