Monday, May 19, 2008

Checkbox arrays in Rails

Rails has got some nice default form options available in the FormHelper, however the check_box still leaves a little to be desired. It's great if you have one or two disparate elements, but what about when you want people to choose from a list of items like the following?

Choose your favorite fruits.





Code
<form>
Choose your favorite fruits.
<div><input value="apple" id="apple" name="fruit" type="checkbox"><label for="apple">Apple</label></div>
<div><input value="orange" id="orange" name="fruit" type="checkbox"><label for="orange">Orange</label></div>
<div><input value="banana" id="banana" name="fruit" type="checkbox"><label for="banana">Banana</label></div>
</form>


In the example above, they all have the name fruit which means that if you choose all of them and submit them to the server, you will get the parameter string

"fruit=apple&fruit=orange&fruit=banana"

All well and good, except when you are in the controller and you try and get the value of fruit (params[:fruit]), you will not get an array with the values of ["apple", "orange", "banana"]. You will only get "banana".

I like bananas as much as the next guy, but I want all the fruit...

So how do you do this?

It appears you have to explicitly tell Rails that it is an array. You can do this by using the square brackets "[]"

Code
<form>
Choose your favorite fruits.
<div><input value="apple" id="apple" name="fruit[]" type="checkbox"><label for="apple">Apple</label></div>
<div><input value="orange" id="orange" name="fruit[]" type="checkbox"><label for="orange">Orange</label></div>
<div><input value="banana" id="banana" name="fruit[]" type="checkbox"><label for="banana">Banana</label></div>
</form>


Now when you call params[:fruit], you will get the array ["apple", "orange", "banana"].

Note that this will work with any other type of elements as well (as long as there is a [] directive to turn them into an array).

Monday, May 12, 2008

Turning autocomplete off

Most modern browsers have a handy little feature which will check to see if you have filled in a text box before, and if so it will present you with a history of what you selected.

For the most part this is a very useful piece of functionality but for one caveat. The browser does not fire any kind of JavaScript event when this happens. Dynamic form validation based on user input thus becomes a (to use Dave Chappelle's word) "biatch".

Fortunately after digging around a little I found that there is a handy little attribute called "autocomplete" which you can set to "off" on the form element.

<form method="post" action="/registration/create" autocomplete="off">

This will keep those nasty little history drop downs from messing up your input validation.

Thursday, May 08, 2008

A couple cool FaceBook games

I just got turned onto a couple of cool FaceBook games today.

Bumper Stars

http://apps.facebook.com/bumperstars/
Bumper Stars is a cross between pinball, pool and Pacman. Basically you have a little beaver whom you shoot off to eat fruit and you bounce off all sorts of things. Kind of stupid, but fun and addictive.


Who Has The Biggest Brain

http://apps.facebook.com/biggestbrain/?pf_ref=sb
Who Has The Biggest Brain is one of those rare games which makes you think and makes analytical thought into a competitive sport. There are about 7 or 8 varieties of brain tests and teasers from simple math to figuring out which random objects weigh more than the others, finishing puzzles and counting blocks. The first few times you play are the most fun as you are presented with brand new kinds of tests which make you learn new tasks (after that it gets more competitive but stretches your brain less). In any case I am a scholar!