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

fkaflof6  于 2022-12-02  发布在  PHP
关注(0)|答案(1)|浏览(107)

我正在创建一个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'];
toiithl6

toiithl61#

尝试使用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,
           success: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>

相关问题