复选框表单中的自定义URL [英] Custom URL from a checkbox form
本文介绍了复选框表单中的自定义URL的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试通过一些复选框创建自定义URL.
I am trying to create a custom URL from some checkboxes.
<form method="get" action="/search">
<input type="checkbox" name="q" value="label:TAG1" />TAG1<br />
<input type="checkbox" name="q" value="label:TAG2" />TAG2<br />
<input type="checkbox" name="q" value="label:TAG3" />TAG3<br />
<input type="submit" value="Filtrar" />
</form>
我有这个:http://www.exemple.com/search?q=label:TAG1&q=label:TAG2&q=label:TAG3
但是我想要这个:http://www.exemple.com/search/?q=label:TAG1|label:TAG2|label:TAG3
推荐答案
尝试以下方法:
(说明在代码内)
Try with this:
(explanations are within the code)
$(document).ready(function(){
$("form").on("submit",function(e){
// Disable the button's submit.
e.preventDefault();
// Start setting a custon query.
var query="?q=";
// Check each checked checkboxes.
$("input[type='checkbox']:checked").each(function(index){
// Adds | only on second and next...
if(index>0){
query+="|";
}
// Adds the value.
query+=$(this).val();
});
//Redirect with the query in GET
console.log( $(this).attr("action")+query );
window.location=$(this).attr("action")+query;
});
});
编辑
将此添加到您的<head>:
EDIT
Add this to your <head>:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
这篇关于复选框表单中的自定义URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
