Question

Rails noob here posing a question.

I’m trying to get users to input their phone number. Form contains separate fields for countrycode, areacode and phonenumber at the moment.

<% form_tag phones_path, :method => 'get' do %>
<th><%= text_field_tag :countrycode %></th>
<th><%= text_field_tag :areacode %></th>
<th><%= text_field_tag :search, params[:search] %></th>
<th><%= submit_tag "Search", :name => nil %></th>
<% end %>

I want to convert the countrycode field into a dropdown selection of country names, and automatically display the actual country code upon selection. Eg user selections USA, and +1 is displayed. I am going to store both the country name and the numerical code.

I think I need to use a combination of collection_select for the dropdown and javascript to refresh the display. But I’m kinda lost as to how to proceed. Will any kind soul give some hints please?

Answer 1

first you should create a hash in your controller that looks like:

@countries  = { "United States" => "+1", "Switzerland" => "+41" }

Then create a select list for the countries and add an onchange javascript event handler for the select list:

<% form_tag phones_path, :method => 'get' do %>
<th>
  <%= select_tag  :country, 
                  options_for_select(@countries), 
                  :onchange => "document.getElementById('countrycode').value = this.options[selectedIndex].value;" 
  %>
</th>
<th><%= text_field_tag :countrycode %></th>
<th><%= text_field_tag :areacode %></th>
<th><%= text_field_tag :search, params[:search] %></th>
<th><%= submit_tag "Search", :name => nil %></th>
<% end %>

Note: I’ve used standard Javascript for the onchange event, if you use jQuery or prototypeJS this could be written much shorter and cleaner 🙂