Creating a simple form with checkboxes which i cant get to pass the correct URL

2 Views

I can’t seem to fix this (what I know is pretty simple) problem.

I’m creating a simple tag search that will search venues on my website.
It’s set up so when multiple tags are selected it will bring back all results that have all the tags assigned to them. So I need some simple code that displays checkboxes on the homepage and alters the URL to

Read More
.../placecategory/venue/?place_tags=place+venue

I’ve come up with the following code (with just 2 options, for now) just to get it working 

<form 
  action="<?php bloginfo('home') ?>/placecategory/venue/?place_tags=hall+stage" 
         method="get" accept-charset="utf-8">
       <h2>Search</h2>
       <input type="checkbox" value="hall" name="place_tags">
       <label for="tag-105">hall</label>
       <input type="checkbox" value="stage" name="place_tags">
       <label for="tag-104">stage</label>
       <input type="submit" value="Search">
</form>

The problem with this is it’s changing the URL to 

 .../placecategory/venue/?place_tags=hall&place_tags=stage

which isn’t pulling up the results on my site. How can i change this so that it removes the second &place_tags= (and every one after that)?

I can tell that i’m missing something silly but it’s really frustrating me!!

Thanks in advance 🙂

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. Is this what you are looking for? 

     <form action="<?php bloginfo('home') ?>/placecategory/venue" method="get" accept-charset="utf-8">
      <h2>Search</h2>
      <input type="checkbox" value="hall" name="place_tags[]">
      <label for="tag-105">hall</label>
      <input type="checkbox" value="stage" name="place_tags[]">
      <label for="tag-104">stage</label>
      <input type="submit" value="Search">
 </form>

  2. You can parse thru this values with JS and put them into hidden input at once.

    Try this:

    include jQuery library to the head section:

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    then in the body section

    <script type="text/javascript">

       function submit_me() {
                var values = $.map($("input.get-me:checked"),function(input){
                      return input.value;
                  });

                $('#hidden-input').val(values.join('+'));

                $('#your-form').submit();
      };

 </script>

       <input class="get-me" id="tag-105" type="checkbox" value="hall" name="one" />
       <label for="tag-105">hall</label>
       <input class="get-me" id="tag-104" type="checkbox" value="stage" name="two" />
       <label  for="tag-104">stage</label>
       <img width="50" height="50" src="get.png" onClick="submit_me()" />


        <form id="your-form" action="<?php bloginfo('home') ?>/placecategory/venue/" method="get" accept-charset="utf-8">
        <input id="hidden-input" type="hidden" value="" name="place_tags" />
        </form>

    assign to your inputs class=”get-me” and put your image into img. You have to only test this on other browsers then FF. Good luck.