Dynamically change form based on value selected in combobox in Ruby on Rails

Question

I have the following tables:

Services
ID| Service_type_id| desc| date|payment_terms

Service_types
ID|NAME|isCredit

Payment_Terms
ID|Payment_Term

The services table contains a list of services. The service type defines the kind of service offered. Some service_types are offered on credit - the isCredit field holds a boolean 1 or 0 value. The thing is that when a user adds a service - I have a combo box populated with the service types. However what I need is that when the user chooses a service type whose isCredit value is 1, it should show on the same form a combo box with options of payment terms from the payment terms table.

How can this be done in ruby on rails? I only want that the payment_term combo box be displayed when the service_type chosen has an isCredit value 1 else the services.payment_terms = 0

You need do it in Javascript. It's not a rails problem. – shingara Mar 08 '12 at 08:45 — shingara, Mar 08 '12 at 08:45

score 1 · Accepted Answer · answered Mar 08 '12 at 08:48

First, render the select box with payment terms as hidden (by using specific css class for example). Let's assume it has id payment_terms.

Then render services select box with additional data attribute to keep track if service isCredit 0|1

<select id=services>
<% services.each do |service| %>
    <option value=<%=service.id %> data-iscredit=<%=service.type.isCredit ? '1' : '0' %>><%=service.desc %></option>
<% end %>
</select>

Write a simple script in JS to handle change event on the select populated with services and show/hide payment_terms select depening on isCredit. I'm assuming you're using jQuery.

$("#services").change(function() {
   var selopt = $(this.children[this.selectedIndex]),
       isCredit = parseInt(selopt.attr('data-iscredit'));
   if (isCredit === 0) {
       $("#payment_terms").hide();
   } else {
       $("#payment_terms").show();
   }
})

Dynamically change form based on value selected in combobox in Ruby on Rails

1 Answers1

Linked