如何使用同一名称下的多个复选框自定义查询字符串


How to customize query string with multiple checkboxes under same name?

我有一个带有get方法的表单,用于从数据库中搜索项目(车辆)。表单有多个复选框集。类似用户可以通过从品牌复选框列表中选择多个品牌来过滤搜索结果。类似地,用户也可以从车型复选框列表等中对车型应用过滤器。表单上大约有10个这样的过滤器。

这是我的表单的代码片段:

<form action='./search' method='get'>
<input type='checkbox' name='make[]' value='BMW'/> 
<input type='checkbox' name='make[]' value='Mercedes'/> 
<input type='checkbox' name='make[]' value='Honda'/> 
<input type='checkbox' name='make[]' value='Toyota'/> 
<input type='checkbox' name='make[]' value='Porsche'/> 
......//Remaining Form
</form>

同样,对于汽车模型,我也有类似的标记。。。有这样10个过滤器都是使用复选框列表实现的。

现在问题来了,当我提交表单时,我得到的URL是这样的:

http://localhost/auto/search?make=BMW&make=Mercedes&make=Honda

这形成了一种我不喜欢的查询字符串类型,即它对所有检查的值重复"make"属性,对其余9个过滤器也会重复。这将导致非常长的难看的URL。

我想要的是我的URL应该看起来像这样:

http://localhost/auto/search?make=BMW,Mercedes,Honda

这要好得多,但我不知道我该如何做到这一点。我所尝试的是获取复选框的所有值,然后将它们写入隐藏字段值,以便在查询字符串中获得所需的格式。取消设置用户选择的所有复选框,并提交包含所有选择的隐藏字段的表单。但问题是,当表单提交时,我在URL中得到两个"make"字段,如:

http://localhost/auto/search?make=&car_makes=BMW,Mercedes,Honda

其中car_makes是隐藏的输入字段,我在其中写入了value属性中的所有选择。

有什么解决办法吗?所以make属性不会被提交,但它会被提交,因为它是表单的一部分

谢谢。

试试这些:

<html>
<head>
    <script type="text/javascript">
        function buildup(){
            var makes=document.getElementsByName('make[]');
            var m=document.getElementById('make');
            m.value='';
            ms='';
            for (var i = makes.length - 1; i >= 0; i--) {
                if(i>0)ms=ms+',';
                ms=ms+makes[i].value;
            }
            m.value=ms;
            document.getElementById('form').submit();
        }
    </script>
</head>
<body>
    <input type='checkbox' name='make[]' value='BMW'/> 
    <input type='checkbox' name='make[]' value='Mercedes'/> 
    <input type='checkbox' name='make[]' value='Honda'/> 
    <input type='checkbox' name='make[]' value='Toyota'/> 
    <input type='checkbox' name='make[]' value='Porsche'/> 
    <form action='./search' id='form' method='get'>
        <input type='hidden' name='make' id='make'>
        <input type='button' value='submit' onclick='buildup()'>
    </form>
</body>

如果不希望提交make输入,则应在提交表单之前禁用它们(或删除name属性…)。

将一个类添加到你不想提交的所有输入中,然后在表单提交之前做这样的事情可能是最简单的:

html:

...
<input type='checkbox' name='make[]' value='BMW' class='dont-send-class' /> 
...

js:

$('.dont-send-class').prop("disabled", true);
// now you can submit the form