Question

我有一个带有get方法的表单，用于从数据库中搜索项目（车辆）。表单有多个复选框集。用户可以通过从制作复选框列表中选择多个制作来过滤搜索结果。同样，用户也可以从车型chebox list等车型上应用过滤器。表格上大约有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

这形成了一种我不喜欢的查询字符串，即它正在重复制作＆＃39;所有已检查值的属性，也将为剩余的9个过滤器执行此操作。这将导致非常长的难看的URL。

我想要的是我的网址应该是这样的：

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

这要好得多，但我不知道如何实现这一目标。我试过的是获取复选框的所有值，然后将它们写入隐藏字段值，以便在查询字符串中获得所需的格式。并取消设置用户选择的所有checbox并提交包含所有选择的隐藏字段的表单。但问题是，在提交表单时我会得到两个＆＃39; make＆＃39; URL中的字段如：

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

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

对此有何解决方案？因此make属性不会被提交，但确实如此，因为它是表单的一部分。

感谢。

Answer 1

试试这些：

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

Answer 2

如果您不希望提交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

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

2 个答案: