将复选框选项附加到URL - Appending checkbox selections to URL

我希望能够通过选择多个产品标签搜索我的WordPress Woocommerce商店。默认情况下，如果您向产品添加标签，它们在产品页面上是可见的，如果您单击一个标签，它会搜索标记相同的其他产品。这个搜索的结果看起来像这样:

http://localhost/ccloud/?product_tag=option1

如果您手动添加其他标签到此URL，它将搜索标记有两个选择的产品，如下所示:

http://localhost/ccloud/?product_tag=option1+option2

这是可行的，但显然我希望用户能够使用复选框来做到这一点。

我已经创建了这个表单(它不工作)

<form name="search_by_tag" action=/product_tag.php method="get">
  <input type=checkbox name="option1">Option 1<br>
  <input type=checkbox name="option2">Option 2<br>
  <input type=checkbox name="option3">Option 3<br>
  <input type=checkbox name="option4">Option 4<p>
  <input type=submit value="Search">
</form>

我认为它不起作用，因为它没有正确发送动作。选择多个复选框并进行搜索的结果如下所示:

http://localhost/product_tag.php?option1=on&option2=on

我如何纠正url(第一部分缺少目录)并删除.php部分等?如果我删除。php扩展名

，它根本不起作用

您必须使用一点JavaScript才能使其工作，但您可以这样做。

HTML:

<input type="checkbox" class="tags" value="red">Red<br>
<input type="checkbox" class="tags" value="blue">Blue<br>
<form name="search_by_tag" action="/ccloud/" method="get">
  <input type="hidden" id="tags" name="product_tag" />
  <input type="submit" value="Search"/>
</form>

jQuery:

$(function() {
  $('form').on('submit', function() {
    var tags = [];
    $('.tags:checked').each(function() {
        tags.push($(this).val());
    });
    tags = tags.join(' ');
    if (tags) $('#tags').val(tags);
    else $('#tags').remove();
  });
});

所以，我们正在做的是使用一个隐藏字段来存储选中的标签，并将复选框移出表单。然后，当它们提交时，我们填充隐藏字段，使其包含在查询字符串中。在URL中，空格变成+。

product_tag需要是隐藏字段的名称，并且动作是/ccloud/，因此您最终得到您想要的URL。下面是一个jsFiddle的操作

我在你的代码中看到的几个问题:

<form name="search_by_tag" action=/product_tag.php method="get">
  <input type=checkbox name="option1">Option 1<br>
  <input type=checkbox name="option2">Option 2<br>
  <input type=checkbox name="option3">Option 3<br>
  <input type=checkbox name="option4">Option 4<p>
  <input type=submit value="Search">
</form>

type属性应该用引号括起来。此外，您没有设置value属性。为了让URL变成/product_tag你需要去掉.php然后把表单动作设置成完整的网站URL所以这应该更接近你想要的:

<form name="search_by_tag" action="http://my.great.site/product_tag" method="get">
  <input type="checkbox" name="option1" value="option1">Option 1<br>
  <input type="checkbox" name="option2" value="option2">Option 2<br>
  <input type="checkbox" name="option3" value="option3">Option 3<br>
  <input type="checkbox" name="option4" value="option4">Option 4<p>
  <input type=submit value="Search">
</form>

也就是说，您需要添加更多的逻辑—通过PHP或JavaScript，就像用户dave指出的那样—来获得这个集合。一个简单的get是行不通的。