从提交的表单合并具有多个相同参数的url

我有一个带有多个复选框的表单，所有这些都被称为过滤器。当表单被提交时，它们会按照预期添加到URL“example.com/?filter=var”中。从提交的表单合并具有多个相同参数的url

当有多个复选框被选中时，它们会被添加到url中，如下所示：“example.com/?filter=var & filter = var2”。

是否有可能以某种方式改变这种情况？我需要他们在URL中作为“example.com/?filter=var+var2”。

这可能以某种方式实现吗？使用Javascript是没有问题的。

2016-12-07 user48745

添加一个函数调用您的提交按钮，这样离开<form>您的表单标签。

$(function() { 
    $('#target').click(function() { 
    var checkValues = $('input[name=checkboxlist]:checked').map(function() { 
     return $(this).parent().text(); 
    }).get().join('+'); 
    window.location.href = "http://example.com/?filter="+checkValues; 
    }); 
});

来源

2016-12-07 13:14:51 driconmax

这个完美的作品！谢谢 – user48745

我实际上只是试了一次，它将它们添加到URL如下： “example.com/?filter=var,var2”，用逗号代替+的。 – user48745

其实，在get（）.'后面加''join（'+'）'; – user48745

您可以使用hidden字段，并在提交事件中使用筛选器设置它的值。隐藏将得到名称filter和复选框值将被忽略：

//$("form").on("submit", function() { 
 
$('input[type="submit"]').on("click", function() { 
 
\t var filter = []; 
 
\t $('input[type="checkbox"]:checked').each(function() { 
 
    \t filter.push(this.value); 
 
    }); 
 
    
 
    $("#filter").val(filter.join("+")); 
 
    console.log("filters", filter.join("+")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="hidden" name="filter" id="filter" /> 
 
    <input type="checkbox" value="val1" /> 
 
    <input type="checkbox" value="val2" /> 
 
    <input type="checkbox" value="val3" /> 
 
    <input type="submit" /> 
 
</form>

使用$("form").on("submit", function() {，而不是在按钮的事件。我刚刚评论它，因为你不能在StackOverflow代码片段中提交。

Fiddle Version

来源

2016-12-07 13:13:12 DontVoteMeDown

从提交的表单合并具有多个相同参数的url

回答

相关问题