Dynamically update field value in Rails form

Question

I have a form in my ruby app which has a field total_hours_spent and different fields for breakup of the various activities like design_hours, analysis_hours, coding_hours etc.. I am looking for a mechanism where as soon as all the break up hours fields are filled, the total hours field should be updated dynamically. Sad thing is I dont know Ajax or Jquery. I know javascript but don't know how to use it with rails.

So what I am doing now is once the user submits the form, the values are calculated and then stored in the data base. Is there a way to dynamically display the field value using only rails?

Below is the form code: I would like to add two add a field total_hors which would be automatically populated with the value build_hours + test_hours + analysis_hours and other few fields..how to do this?

<%= nested_form_for(@rfsestimation) do |f| %>

<% if @rfsestimation.errors.any? %>
      <h2> These errors prohibited the RFS from being saved </h2>
<font color="red">
        <ul>
          <% @rfsestimation.errors.full_messages.each do |msg| %>
          <li><%= msg %> </li>
         <% end %>
    <% end %>
        </ul>
</font>
<div class = "col-md-6">
 <h4>IRIS AME RFS Estimation Summary Sheet</h4>

<table class = "table">
<tr> <td> RFS Number </td>
<td> <%= f.text_field :number, :placeholder => "Enter RFS Number" %> </td>
</tr>
<tr> <td> RFS Name </td>
<td> <%= f.text_field :name, :placeholder => "Enter RFS Name" %> </td>
</tr>
<tr> <td> Date of Estimation </td>
<td> <%= f.date_select :date_of_estimation, :placeholder => "Enter Date of Estimation" %> </td>
</tr>
<tr> <td> Request Type </td>
<td> <%= f.select :request_type_id , Rfsestimation.request_types.map { |k, v| [k.humanize, v] } %> </td>
</tr>
<tr> <td>Band</td>
<td> <%= f.select :band_id , Rfsestimation.band_types.map { |k, v| [k.humanize, v] } %> </td>
</tr>
</table>
<br/>

<table class = "table">
  <thead>
    <tr>
   <td>Task</td>
   <td>Effort(Hours)</td>
   <td>Comments</td>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td>
      Analysis / Requirements Gathering
    </td>
    <td>
<%= f.fields_for :rfstaskset do |rfs_task| %>
      <%= rfs_task.number_field :analysis_hours %>
    </td>
     <td>
       <%= rfs_task.text_area :analysis_comments, :size=> "40x1" %>
    </td>
  </tr>  

    <tr>
    <td>
      Design
    </td>
    <td>
          <%= rfs_task.number_field :design_hours %>
    </td>
     <td>
       <%= rfs_task.text_area :design_comments, :size=> "40x1" %>
    </td>
  </tr>  

     <tr>
    <td>
      Build
    </td>
    <td>
      <%= rfs_task.number_field :build_hours %>
    </td>
     <td>
       <%= rfs_task.text_area :build_comments, :size=> "40x1" %>
    </td>
  </tr> 
    <tr>
    <td>
      Test
    </td>
    <td>
      <%= rfs_task.number_field :test_hours %>
    </td>
     <td>
       <%= rfs_task.text_area :test_comments, :size=> "40x1" %>
    </td>
  </tr> 
     <tr>
    <td>
      UAT Support
    </td>
    <td>
      <%= rfs_task.number_field :UATSupport_hours %>
    </td>
     <td>
       <%= rfs_task.text_area :UATSupport_comments, :size=> "40x1" %>
    </td>
  </tr> 
     <tr>
    <td>
      Deployment Support and
      Deployment instruction document
    </td>
    <td>
      <%= rfs_task.number_field :DepSupport_hours %>
    </td>
     <td>
       <%= rfs_task.text_area :DepSupport_comments, :size=> "40x1" %>
    </td>
  </tr> 

    <tr>
    <td>
      contingency
    </td>
    <td>
      <%= rfs_task.text_field :hours_per_day, :value => "10%", :disabled => "true"  %>
    </td>
     <td>
       <%= rfs_task.text_area :contingency_comments, :size=> "40x1" %>
    </td>
  </tr> 



  </tbody>
    <% end %>

  </table>
  <%= f.submit "Create RFS", class: "btn btn-success"%>
  </div>
  <div class = "col-md-6">
  <table class="table">
  <br/><br/>
  <tr>
  <td> Hours/day : </td> <td> <%= f.text_field :hours_per_day, :placeholder => "Enter hours per day", :value => "8.8", :disabled => "false" %> </td>
  </tr>
  <tr>
  <td> Estimated Start Date : </td> <td> <%= f.date_select :estimated_start_date %> </td>
  </tr>
  <tr>
  <td> Estimated End Date : </td> <td> <%= f.date_select :estimated_end_date %> </td>
  </tr>


  </table> <br/> <br/> <br/> <br/><br/> <br/><br/> 
  <%= f.fields_for :rfsnote do |rfs_note| %>
  <%= rfs_note.text_area :notes, :size=> "60x20", :placeholder => "Enter RFS Notes" %>
  <% end %>
  </div>

  <% end %>

Answer 1

so if you have the required values in the database,you can directly use it as instance variable and show it in your views..for example

def create
 #here you create/save the required data in db
 @user=User.new(params[:new])
  if @user.save
   #get the values you need
   @time_used=@user.time_used
   @build_hrs=@user.build_hrs
   ...
   ...
   #and so on
   #all these values will be available in the view directly
  redirect_to users_show_url
 else
  render :new
 end 
end##method ends

end

Answer 2

You can use before_save callback e.g

before_save :update_total_houres

 def update_total_houres
   total_hours_spent = design_hours + analysis_hours + coding_hour
 end

also using JavaScript

$(document).ready(function(){

$('.hours').change(function() {
    update_total_hours();
});
});

function update_total_hours()
{
var total = 0; 

var analysis_hours = $(".analysis_hours").val();    
var design_hours = $(".design_hours").val();    
var coding_hour = $(".coding_hour").val();  
total = sum all   
//just update the total to sum  
$('.total').text(total);
} 

Answer 3

You can make callback before_create OR before_save in model, that will store automatically in database, like:

before_create :calculate_total_hours

def calculate_total_hours
  total_hours_spent = design_hours, analysis_hours, coding_hours
end

You can also do via jquery, but do something in model will be strong business logic