Updating forms dynamically in rails using javascript

Question

I have a form that allows a user to select a supplier(freelancer), a type of service that is required and a number of shifts that the supplier(freelancer) will be working. Depending on which service is selected and how many shifts the freelancer is required for, I need to change the total amount of the request dynamically.

UPDATE

On the Service model, there is a column named rate which holds a value(an integer). Within my form, I need to be able to grab the rate value to calculate the total amount on the client side.

Request belongs_to Service and Service has_many Requests.

This is my code so far:

form:

= f.label :supplier_id = f.collection_select :supplier_id, Supplier.all, :id, :business_name, {prompt: true}, required: true, class: 'form-control select' = f.label :service_id = f.collection_select :service_id, Service.all, :id, :name, {prompt: true}, required: true, class: 'form-control select' = f.label :shifts = f.text_field :shifts, required: true, class: 'form-control datepicker' = f.label :total_amout = f.text_field :total_amout, readonly: true, class: 'form-control' 

javascript:

function updateCost() { var total_shifts = $('#booking_shifts').val().length; var service_rate = $('select#booking_service_id :selected').data('rate') var total = service_rate * total_shifts $('#booking_total_amount').val(total); } $('#booking_shifts').change(function(){ updateCost(); }) 

In the total amount field I am getting NaN

In the console when I do:

$('select#booking_service_id :selected').data('rate'); 

I am getting Undefined

And when I am trying:

$('select#booking_service_id :selected').data(); 

I am getting {} empty hash

Could you please advise how can I get the rate of selected service and store it into a variable service_rate in order to do the maths.

Answer 1

Ok so the problem is the way you are selecting the rate. to get the rate im asuming the rate is the value of the option. You should use the following query

var service_rate = $( "#booking_service_id option:selected" ).text(); 

Now since that value is text youll need to parse it to int

var total = parseInt(service_rate) * total_shifts 

total should contain the value you are expecting.

Hope it Helps

Answer 2

I have figured it out:

In the form, I have changed collection_select to select with options_to_select like this:

= f.select :service_id, options_for_select(@services.map{ |s| [s.name, s.id, {'data-rate'=>s.rate}] }, selected_key = f.object.service_id), {prompt: true}, {class: 'form-control select'} 

And then I was able to retrieve the data that I was looking for with javascript like this:

function updateCost() { var total_shifts = $('#booking_shifts').val().length; var service_rate = $('select#booking_service_id :selected').data('rate'); var total = parseInt(service_rate) * total_shifts $('#booking_total_amout').val(total); } $('#booking_shifts').change(function(){ updateCost(); }); 

Hopefully this will help someone with similar issue.