Photo credit

Radio Buttons in Rails

Today we continue our tour of forms in Rails. Let’s continue by learning how to add radio buttons onto our form.

In Part 1 our form contained a textbox so that we could create a new flight given a flight number, and in Part 2 we added a checkbox for meal service. Let’s add a few radio buttons so that we can associate the flight with the kind of airplane that should be assigned to the flight.

Adding another column to the Flights table

Airlines often refer to the model of airplane as the “equipment,” so I’m going to use that term instead of the potentially confusing term “model”. Create another migration file, but this time we’ll use some command-line options to make our job easier:

script/generate migration AddEquipmentToFlight equipment:string
rake db:migrate

or for those on Windows

ruby script\generate migration AddEquipmentToFlight equipment:string
rake db:migrate

Presto, we’ve added a string column named equipment to the Flights table.

Adding Radio Buttons

Now that we have our new column, let’s add some radio buttons. Open up the new.html.erb template again, and use the form builder object to add three radio buttons:

<p>
  <p>
    <%= f.radio_button :equipment, '747' %><b>Boeing 777 (Jet, Nice)</b>
  </p>
  <p>
    <%= f.radio_button :equipment, 'MD80' %><b>MD-80 (Jet, Old)</b>
  </p>
  <p>
    <%= f.radio_button :equipment, 'Cessna' %><b>Cessna (Propeller)</b>
  </p>

Navigate to the form in your browser:

As always, look at the actual HTML that got generated. It’s important to understand the HTML that your embedded Ruby generates. Here’s the HTML for the first radio button:

<input id="flight_equipment_747" name="flight[equipment]" type="radio" value="747" /><b>Boeing 777 (Jet, Nice)</b>

As you know by now, the name attribute follows the conventions necessary to make good things happen in our params hash. Notice that all of our radio buttons have the same name attribute, but that the browser will only submit the name/value pair for the button that the user selects. Radio buttons with the same name are considered part of the same radio button group, so that the user can only select one choice per group.

Go ahead and choose an airplane, and then click the Create button. Open up script/console to convince yourself that the equipment value was saved:

>> f = Flight.find_by_number '567'
=> #<Flight id: 3, number: "567", created_at: "2008-04-06 09:55:14", updated_at: "2008-04-06 09:55:14", meal: false, equipment: "Cessna">
>> f.equipment
=> "Cessna" 

By now, using form_for and the form builder methods should be feeling more natural. Next time, we’ll be adding listboxes and combo boxes (drop-down lists). In the meantime, if you have comments or questions on what we’ve done so far, leave us a comment below.