javascript - Use jquery ajax in my Ruby on Rails app to refresh and text_field -

my ruby on rails application it’s construction company , in part of have 2 models, 1 called item (rubro) , other called budget. each item created has own price. in budget form have option add different items quantity using nested form. in first column have collection_select works items id select item add, in second column complete quantity, , in third column idea display subtotal value (item price * quantity).

my question how can item_id selected in collection_select use item price , show (item price * quantity) in subtotal text_field?

it possible that? know using ajax , jquery, new these. or give me other idea of how it?

this part of form want said: _form.html.erb

 <%= f.fields_for :budget_details, :wrapper => false |form| %>                 <tr class="fields ">                   <td class="col-md-4">                     <div class="col-md-9"><%=form.collection_select(:rubro_id, rubro.all, :id, :name, {prompt: 'seleccionar'}, class: 'form-control tooltip-required')%></div>                     <div class="col-md-1"><%= link_to "<i class=\"fa fa-plus\"></i>".html_safe, new_rubro_path, {:class => "btn btn-sm btn-flat bg-green ", :title => "nuevo rubro"} %> </div></td>                   <td class="col-md-1"> </td>                   <td class="col-md-2"> </td>                   <td class="col-md-1"><%=form.number_field :quantity, class: 'form-control tooltip-required'%></td>                   <td class="col-md-2"><%=form.number_field :subtotal, class: 'form-control', :readonly => true%></td>                   <td class="col-md-1"><%=form.number_field :utility, class: 'form-control'%> </td>                   <td class="col-md-1"><%=form.link_to_remove '<i class="fa fa-trash"></i>'.html_safe, class: 'btn btn-danger'%></td>                   <br>                 </tr>             <% end %> 

i put in application.js (rubro = item)

$('#collection_select').change(function() {     var rubro = this.val();     var data = {         'rubro_id': this.val(), }     $.ajax({         type:"get",         url : 'rubros/rubro_price',         data : data,         success : function(response) {             var quantity = $("#rubro_quantity").val();             var price = response.price;             $("#price").val(price);             var subtotal_price = (quantity * price);             $("#subtotal_price").val(subtotal_price);         },         error: function() {             alert('error');         }     }); }); 

and rubro_controller.rb

 def rubros_price     @rubro = rubro.find(params[:data])   end 

i writing pseudo code here, if provide code here can same.

please read each line below , put comments if need more clarity.

select item select box said "collection_select".  call ajax item price selected or can take page if price presents anywhere.   price in ajax response.  have "item", "quantity" , "price"(from ajax response). can calculate subtotal (price * quantity) , fill text_box. 

as per feedback, putting ajax code per above pseudo:

$('#collection_select').change(function() {   var item = this.val();   var data = {     'item_id': this.val();     }   $.ajax({     type:"get",     url : "/item_price", /*here in controller can find price per item id*/     data : data,     success : function(response) {        var quantity = $("#item_quantity").val();        var price = response.price;        var subtotal_price = (quantity * price);        $("#subtotal_price").val(subtotal_price);     },     error: function() {         alert('error occured');     }  }); });