Customising form controls in Rails

Here is a simple way to implement custom form controls while still using Rails’ standard helpers. For this example, we’ll implement a two-state graphical alternative to a check-box (usually implemented by the operating system and uncustomisable via CSS), which represents a standard boolean field in your database model.

Normally we’d do something like in our view:

    <%= form_for @model, :url => { :action => :create } do |f| %>
        <%= f.check_box :someBool %>
        <%= f.submit("OK") %>
    <% end %>

But we’d like to use something a little like this to represent our field instead:

Active
Inactive

Firstly the images are added to our Rails view via the helpers, with the addition of assigning each one an ID and an inline style to hide the one opposing the required default state:

    <%= image_tag("signUpItemActive.gif", :size => "13x18",
        :alt => "Active", :id => "checkActive") %>
    <%= image_tag("signUpItemInActive.gif", :size => "13x18",
        :alt => "Inactive", :id => "checkInactive",
        :style => "display:none;") %>

These are then both wrapped in a single anchor tag, which is given an onclick handler to a JavaScript function.

    <a href="#" onclick="toggleCheckBox(); return false;">
         <%= image_tag("signUpItemActive.gif", :size => "13x18",
            :alt => "Active", :id => "checkActive") %>
         <%= image_tag("signUpItemInActive.gif", :size => "13x18",
            :alt => "Inactive", :id => "checkInactive",
            :style => "display:none;") %>
    </a>

The next step is to modify our standard Rails form to assign the check-box an ID, and hide it with some more inline CSS styling. This means it won’t be visible, but will continue to send its value when the form is submitted:

    <%= f.check_box :someBool, :id => "hiddenCheckBox", :style => "display:none;" %>

The JavaScript function can then be defined in Application.js (this could of course be modified to take the IDs as parameters):

    function toggleCheckBox()
    {
        elementActive = document.getElementById('checkActive');
        elementInactive = document.getElementById('checkInactive');
        elementHidden = document.getElementById('hiddenCheckBox');
 
        if (elementActive && elementInactive && elementHidden)
        {
            var state = (elementActive.style.display == "none");
            elementHidden.checked = state;
            elementActive.style.display = state ? "inline" : "none";
            elementInactive.style.display = state ? "inline" : "none";
        }
    }

There we go! Clicking the dummy check-box graphic will toggle the images and set the value in the hidden check-box at the same time. There is only one remaining step and that is to set the default state of the images to match the existing value of the boolean field. Without this the graphics and the form are likely to get out of sync. Even if the form is for creating a new record, the page will be shown again in the event of a validation error.

Another JavaScript function can take care of this:

  function setCheckBox()
    {
        elementActive = document.getElementById('checkActive');
        elementInactive = document.getElementById('checkInactive');
        elementHidden = document.getElementById('hiddenCheckBox');
 
        if (elementActive && elementInactive && elementHidden)
        {
            var state = elementHidden.checked;
            elementActive.style.display = state ? "inline" : "none";
            elementInactive.style.display = state ? "inline" : "none";
        }
    }

Then call this from the page’s body onLoad event:

    <body onload="setCheckBox();">
Comments
Add Comment


Related Articles
Multiple Rails applications
Return To Index
Feeds Subscribe to the blog feed
Categories
Search
Last Tweet
Just Played

Casiotone for the Painfully Alone – Love Connection

The Dodos – God?

The Dodos – Undeclared

Recent Shots

Hallway / Bedroom
Living Room
Hallway

Follow Me

Spoiled Milk

Spoiled Milk is a skilled team of scientists and artists working together to create engaging web experiences.

Being Abroad

A project aiming to publish a collection of personal stories about relocating to a foreign country.

The Botanists

A collaborative music project based around flea market instruments and a desire to be good.

DJ'ing

I play the saddest songs, the happiest songs and nothing in between.

Hire me!

Record Covers

See the Jeremy Warmsley series all in one place.

CJQ Group

CJQ Group is a strategic investment team that supports and grows ambitious companies in the new media, software and art industries.