Appending checkbox selections to URL

4 Views

I want to be able to search through my WordPress Woocommerce store, by selecting multiple product tags. By default, if you add tags to a product, they are visible on the product page, and if you click on a tag, it searches for other products which are also tagged the same. The results of this search look url like this: 

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

If you manually add other tags to this URL, it searches for products which are tagged with both selections, like this:

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

This works, but obviously I want users to be able to do this using checkboxes.

I’ve created this form (which doesn’t work) 

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

I think it doesn’t work because it’s not sending the action correctly. The result of selecting multiple checkboxes and searching looks like this: 

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

How can I correct the url (the first part is missing the directory) and remove the .php part etc? It doesn’t work at all if I remove the .php extension

Post Views: 4

Related posts

Leave a Reply

2 comments

  1. You’ll have to use a little JavaScript to make this work, but you could do it like this.

    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();
  });
});

    So, what we are doing is using a hidden field to store the selected tags, and moving the checkboxes out of the form. Then, when they submit, we populate the hidden field so that it gets included in the query string. Spaces turn into +’s in the URL.

    product_tag needs to be the name of the hidden field, and the action is /ccloud/, so that you end up with a URL like you want. Here is a jsFiddle of it in action.

  2. A few issues I see in your code:

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

    The type property should have quotes around it. Also, you are not setting a value property. And to get the URL to be /product_tag you need to lop off that .php and mayeb set the form action to the full site URL So this should be closer to what you want:

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

    And that said, you need to add more logic—either via PHP or JavaScript like the user dave points out—to get this set. A simple get wouldn’t work.