Ajax: How to display dynamic drop down and text box?

Question

When I click the dropdown value of periods it should automatically display the textbox value for rate_of_interest.

Here is my model code to calculate interest value:

before_save :calculate_value
def calculate_value
  if self.age >= 75 && self.no_of_year == 5
    self.interest_rate == 11.75 
  elsif self.age >= 75 && self.no_of_year == 3
    self.interest_rate == 11.5
  elsif self.age >= 75 && self.no_of_year == 2
    self.interest_rate == 11
  elsif self.age >= 75 && self.no_of_year == 1
    self.interest_rate == 10.5
  elsif self.age >= 58 && self.age <= 75 && self.no_of_year == 5 
    self.interest_rate == 11.75   
  elsif self.age >= 58 && self.age <= 75 && self.no_of_year == 4
    self.interest_rate == 11.5   
  elsif self.age >= 58 && self.age <= 75 && self.no_of_year == 3 
    self.interest_rate == 11  
  elsif self.age >= 58 && self.age <= 75 && self.no_of_year == 2 
    self.interest_rate == 10.5  
  elsif self.age >= 58 && self.age <= 75 && self.no_of_year == 1 
    self.interest_rate == 10  
  elsif self.age >= 75 && self.no_of_year == 4
    self.interest_rate == 11.75
  else
    self.interest_rate
  end
end

According to year and age it should display the interest automatically.

my view page:

<h4><%= f.label :periods, class:'required' %>
<%= f.select(:no_of_year, options_for_select([['',''],['1','1'], ['2','2'],['3','3'],['4','4'],['5','5']]))%></h4>

<h4><%= f.label :interest_rate, class:'required' %>
<%= f.text_field :interest_rate, :readonly => true %></h4>

How and where to use ajax and javascript?

Answer 1

Firstly, you'll be best using case switch (in Ruby):

def calculate_value
   case self.age
     when >= 75
        self.interest_rate = 10 + (0.5 * self.no_of_year) #-> algo to determine interest
     when >= 58 && <= 75
        self.interest_rate = 10 + (0.5 * self.no_of_year) #-> algo to determine interest
     else
        self.interest_rate
   end
end

--

Ajax

In order to use Ajax and Javascript, you first need to have an endpoint to send your data to. This should be defined in the routes:

#config/routes.rb
get "interest", to: "application#calculate_interest"

This will then allow you to use Ajax like this:

#app/assets/javascripts/application.js
$(".select").on("change", function() { //Binds to your select box "change" event
    $.ajax({
        url: "/interest", //Sends to your endpoint
        data: {"year": $(this).val() }
        success: function(data){
            //where the response will be processed
            $(".textfield").val = data;
        }
    });
});

Several caveats to the code above -

1. You need to be able to select the specific elements - I have just used .select etc - you should use an id tag to select them individually
2. Your controller needs to handle the response - by using the respond_to block:

#app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
   def calculate_interest
      respond_to do |format|
          format.html
          format.js
      end
   end
end

---

Update

If you want to update the textbox from the .on("change" event of the select box:

http://jsfiddle.net/CwU33/

$("#test").on("change", function(){
    value = $(this).val();
    $("#text").val(value);
});

<select id="test">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<input type="text" id="text" value="testing">