Checkbox form to url

HTML & CSS
1

Hello everyone!

I am trying to create a form with check boxes for my site; however, I am having some trouble.

After tons of googling, I have made some progress, but it is very slight progress.

I have a site that writes movie reviews. Each movie can be in several different genres (action, romance, sci-fi, etc.)

What I would like to do is create a form with checkboxes that will create a url for me. The form does not need to do any searching of any kind on its own. My website is already set up in this fashion mydomain.com/genre/enter-genre-here

For example, if I wanted to see all of the reviews for action movies, I would go to mydomain.com/genre/action

If I want to sort by more then one genre, I can simply do mydomain.com/genre/genre1+genre2

For example, if i wanted to see all of the reviews for action and romance movies, I would go to mydomain.com/genre/action+romance

The process for adding any additional genres is the same, just add a “+” and the name of the genre.

Also, it does not matter what order the url is in.
mydomain.com/genre/action+romance and mydomain.com/genre/romance+action work just the same.

I have found this example: http://www.htmlcodetutorial.com/forms/_INPUT_TYPE_CHECKBOX.html

and it almost works for what I want it to do. (the example at the bottom with the mushrooms)

The two problems are:
1.) The resulting url has “=on” after each selection. This will not work for my setup.
2.) The url also has /cgi-bin/mycgi.pl? in it, which will also not work for my setup.

Does any one have any advice for how I could handle this?

I feel like there should be a simple solution to this, I simply can not figure out exactly how to do it.

Thanks a lot for your time!!!

2

ScallioXTX,

That works perfect!!!

Thank you so much for the help.

If you do not mind, I have one last question for you. I think it may be entering back into the realm of html. Anyway, I have 39 genres, all of which have been added successfully to my site; however, they look very bland at this point in time. Is there a way that I could style the form, the submit button, and the check boxes?

Thanks again!

3

I wonder tho if there’s already a createURL.php that’s made for wordpress?

4

Don’t know, never used WP.
If there is you could always call mine createGenreUrl.php or something like that :slight_smile:

5

Ah actually I think I see what you’re doing: you’re making a search function.

I am sorry for posting in the html forum if this is not an html question, I was not sure what it was.

Oh well, not a big deal, just wanted you to know that it’s a different type of issue… and if it went further into detail in some other direction we could ask a mod to move this thread, but I don’t think it’s necessary at this point. Oh, and you’re getting 30 lashes for posting in the wrong section : P

I have seen this done in Javascript (perldoc is unfortunately set up that way… supposedly “because instead of a database, it’s just flat files” or something)…

so Javascript is an option but not a very nice one. I personally consider sites who can’t function at their basic level without JS to be broken. However, if you decided to force all users to have Javascript in order to do this one thing, your submit would instead call a Javascript who intercepts the “submitting” action, gathers the .values of the inputs, creates a url and sets that as the form’s action, then tells the form to continue submitting. Ew I can’t believe I’m saying this… : )
(you know that if you actually just put an existing url into the action of a form, along with the method set to GET, clicking the submit will act like a plain old link and will take you to that page, which you must have seen somewhere since that’s kinda what you’re going for…)

But beyond that, you’d still have a script on the backend who puts together the url. action=“makeURL.php” or some such. That script is still going to simply send a new url to the browser, but it has the ability to put values from the form together separated by +'s. Other than Javascript, I really can’t think of a front-end way to do this.

And now that I’m thinking a bit more on it, I’m sure someone must have made such a thing for Wordpress??

Also, while someone typing + in their address bar may work in your current setup, know that your wordpress main script is escaping that character as it’s special, and I’m not 100% sure that browsers other than maybe IE will treat a + in a form’s action the same way.

SitePoint did make a new Wordpress forum. See if someone’s seen such a thing, refer to this thread, and state you’re trying to make a sort of search/url-builder setup. It’s also possible there’s some wordpress widget that does this and doesn’t use a form, but something else.

6

Thanks a lot for the advice!

I suppose it is time to try the… triple pronged approach and head over to the php forum.

Also, I will continue my google search as well.

Thanks again for trying

7

Thanks again for the reply!

After I hit the submit button, I get this error message:

Parse error: syntax error, unexpected ';' in /home/hid-den/public_html/createURL.php on line 8

When I look into my file, this appears to be line 8.

header('Location: /genre/'.implode('+', $_GET['genre']);

Any ideas?

8

Yes, but lowercase and properly closed and attributes quoted:

<input type=“submit” value=“submit” />

(Unless you’re using HTML4, then your line is fine)

Yes :slight_smile:

9

ScallioXTX:

Thank you for the help!!!

I think your suggestion works, but I do not seem to see a “search” or “submit” button with your code. Do I need something like

<INPUT TYPE=SUBMIT VALUE="submit">

? If so, would it just be before the

/form

?

Thanks again for your help. I greatly appreciate it!

10

The HTML would have to be something like this:


<form method="get" action="createURL.php">
  <input type="checkbox" name="genre[]" value="genre1" /> Genre 1
  <input type="checkbox" name="genre[]" value="genre2" /> Genre 2
  <input type="checkbox" name="genre[]" value="genre3" /> Genre 3
  <!-- etc -->
</form>

The the code for createURL.php is:


foreach($_GET['genre'] as $k => $genre)
{
  // sanitize data
  if (!preg_match('/^[\\w\\d_]+$/', $genre))
    unset($_GET['genre'][$k]);
}
header('Location: /genre/'.implode('+', $_GET['genre']);

As you don’t want the javascript I’m not writing that. If you’re intested after all just ask me, I’ll show the javascript as well :slight_smile:

11

Yes, I forgot a parenthesis, it should be:

header('Location: /genre/'.implode('+', $_GET['genre']));
12

Yeah, you can style forms, thought it usually takes some extra wrangling due to browsers having more control over forms than they have over other elements.
By the way, your form either needs a fieldset OR a div or something around your inputs, otherwise it’s not legal. Forms, like the body and blockquote, are a special kind of block, a kind who requires a block as their direct child. If you include a fieldset, it should have a legend. Styling legends is a pain in the ass. You also do not want just text floating around the inputs. That’s what labels are for. Labels come with a for attribute that matches the label to its form control (by being the same as that input’s id).

For the checkboxes, you can have a little icon graphic next to the text. Images are perfectly legal within labels.
From a site I’m working on right now:
<label for=“ideal”><input type=“radio” id=“ideal” name=“betalen” checked=“checked” /> iDEAL <img src=“images/ideal.png” width=“28” height=“25” alt=“” /></label>

alt=“” becauase iDEAL iDEAL makes no logical sense if images are off. I could have also put a class on the label and added some padding to make room for the image as a background image. Or I could have used the image with alt text AS the label, where the alt text serves as the label text. In those cases, you make sure the label is wide enough to show all the words when images are off.

I haven’t decided if I want a graphic for the other two payment methods, so this is what it looks like now:

Just a small thing. You can have stripey rows of two questions each. You can have a little CSS popup appear when the mouse goes over an option. You can change your submit button from
<input type=“submit” value=“submit”>
to
<input type=“image” src=“animage.png” alt=“submit”>
Of course, you’d style the :focus and :hover of that image submit so that it looks clearly clickable to anyone who doesn’t see the image.

All sorts of things you could do. Sometimes a lot of images ends up being safer than trying to directly style form controls. To give you an idea of the difficulty you’ll face if you want to style the controls themselves, read this:

13

This is not an HTML issue at all!

What should happen is you have an HTML form who asks the user to input the genre.

(html4)
…inside the form…
<fieldset>
<legend>Choose a genre</legend>
<label for=“romance”><input type=“radio” name=“genre” id=“romance” value=“romance”> Romance</label>
<label for=“action”><input type=“radio” name=“genre” id=“action” value=“action” checked=“checked”> Action</label>
<label for=“drama”><input type=“radio” name=“genre” id=“drama” value=“drama”> Drama</label>
<label for=“zombie”><input type=“radio” name=“genre” id=“zombie” value=“zombie”> Zombie</label>
etc…
</fieldset>
…MOAR FORM…

All radio’s (or checkboxes if people can choose more than one) have the same name attribute value, in this case, genre.

Your form uses the action attribute to state where the submit should go: if the submit type is GET, then the action is a url. If it’s a POST, then it’s usually a script sitting on the backend.

Since people are filling in movies, and these are going to be stored somewhere (a database?) so that others may access them, you will want to do a POST and call a script.

<form action=“mymoviescript.php” method=“post”>

If your server is running PHP (the example above has a PHP script), and you have a script who can take all the filled-in values of your form and Do Something with them, then it sends the user a new URL (this is called POST-REDIRECT-GET) and they are presented with some new screen: likely the information they just sent in, or a message stating that their information is being processed, or whatever.

The example you looked at is assuming a Perl CGI script (/cgi-bin/mycgi.pl?) instead. That part of the example was really just “your script here”.

HTML cannot process anything. HTML cannot create URLs, cannot create HTML pages. HTML clients (browsers usually but not exclusively) ask (using GET) the server for requested URLs and the server serves those, or, using the <form> element’s <input type=“submit”> button, can tell (using POST) the server to add something. Most people make this call scripts that do real work.

I may not have explained this terribly correctly, but you will be dealing in the Programming area very soon, unless you already do have such a script in place on your back end, in which case you need the correct url to wherever you have that script in your form’s action attribute.

14

Stomme poes:

Thank you for taking the time to try and help! I greatly appreciate it.

I am sorry for posting in the html forum if this is not an html question, I was not sure what it was.

As for the actual problem, I do not need the form to make the page. I am using wordpress, so any possible url combination of the genres already exist. If I use the “+” method in the url (as described before) I can see the desired result. The problem is, I have over 40 genres, so if I were to make a list of all of the possible combinations, I would have a huge list.

Is there no way to make the form so that it simply directs people to a url that already exists? The way I imagine it exists is like this.

1.) When ever some one hits the “search” button, the base url they are taken to is mydomain.com/genre/
2.) If they check a genre box, action for example, the name of the genre will be added to the url. (I will somehow specify the name of the genre sort of like you did for “value” in

<label for="zombie"><input type="radio" name="genre" id="zombie" value="zombie"> Zombie</label>

3.) If more than one genre is checked, a “+” will be added to the url separating the terms.

Should I be approaching this differently? Nothing is stored in the database or anywhere for that matter. This form will just help my visitors to figure out the correct url (that already exists).

Thank you very much for your help!

15

Is there a way to expand this to change the url depending on which boxes are checked?

If there is, it’s a secret held by ninjas. I can only think of using JS to do this (frontend). I don’t know of any way of bringing the values of checked form controls into the url of the action attribute.

Re the +, you may be able to escape it yourself. It would be
%2B

Which, if you did end up doing this in a backend script, and if it didn’t come with some escapeURLs()-type function with it, the %2B should do the trick.

What’s likely happening is wordpress is either converting those to your “real” urls anyway, or it’s having Apache do it for it (mod_rewrite). yoursite.com/genre/action+romance isn’t the real url anyway, it’s the rewritten url.

Anyway, I hope someone comes up with something over in WordPress. If it ends up that for whatever reason you have to go get something non-WordPress (like some outside PHP script), don’t hesitate to post in the PHP forum! Tons of gurus over there.
Good luck.

16

Stomme poes:

Thanks again for the reply!

I have taken your advice and decided to try a two pronged approach to this problem - both from the html side of things and the wordpress side of things. If you are interested, here is the wordpress thread: http://www.sitepoint.com/forums/showthread.php?p=4599844

As far as the html side of things go, I would like to stay away from JS if at all possible.

It just frustrates me to no end that there is not a simple way to do this. If wordpress escapes the + symbol, I think I can come up for a work around for that by putting this html page outside of wordpress.

You mentioned

(you know that if you actually just put an existing url into the action of a form, along with the method set to GET, clicking the submit will act like a plain old link and will take you to that page, which you must have seen somewhere since that’s kinda what you’re going for…)

It seems like this what nearly what I am going for. Is there a way to expand this to change the url depending on which boxes are checked?

Thanks for any additional help, it is greatly appreciated.

17

Thanks for the help. Its been a while since I posted on this thread, but I was able to work out the styling, for the most part.

It has been brought to my attention that this form can break.

If a user hits submit without checking any boxes, it directs you to a page that does not exist.

To fix this, would it be possible to either:
1.) Specify a page that the user should be directed to if they do not check a box
2.) Make it so they can not click submit without checking at least 1 box?

Thank you in advance!

18

1.) Specify a page that the user should be directed to if they do not check a box

Sounds better, since that page can explain whatever needs to be explained… user can then hit the back button and try again, otherwise you’ll need Javascript to block the Submit default and use onsubmit() to check if something is filled in (which wouldn’t stop me for example… no JS).

If you are getting users hitting submit without filling something in, you may need to do user testing to find out why.

Are they trying to enter a value and are hitting ENTER which unfortunately submits the form even though the user isn’t finished yet? (IE use to do this correctly, maybe still does, but most other browsers don’t require the focus on the submit for ENTER to work)
Or are they hitting ENTER expecting some sort of default results?

19

Thanks for the reply!

I have spoken with some of the users that have complained about the error and it seems their logic has been that if they submit without clicking anything, it should return all every possible result.

Since that seems to be what they are trying to do, I thought I could put a 301 redirect in my htaccess and redirect from the broken url it takes them to to the actual page that shows everything (since I already have that page). For what ever reason, the redirect does not seem to work. I guess because the broken url has symbols in it?

20

Can you just add that existing page’s url to your params in PHP? Rather than a redirect of that sort. Esp “301”, that one means the original URL is gone permanently which isn’t really true here.

Or… can you set that as the default url, before your PHP changes it (so before all the check genre stuff)? That would be cool: your backend script checks to see if any of the values sent are “” or non-default or whatever, and just “returns” (ends the script) right there.

ScallioXTX would have to explain how you’d do that though, I doesn’t PHP : )