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>

通过ajax为php / mysql查询发送复选框值

1 个答案: