Dynamically update field value in Rails form - ruby-on-rails

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

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 2

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

Answer 3

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