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.

Pshemski · Accepted Answer · 2018-01-11 12:03:27Z

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

edited Jan 11, 2018 at 12:03

Pshemski

1191 silver badge9 bronze badges

answered Jan 9, 2018 at 0:35

jstuartmilne

4,5181 gold badge22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pshemski Over a year ago

This is much better Sudakatux, but I would like to get the rate of the Service rather than the name of the Service. I have updated my post and the code but still not quite there.

Pshemski · Accepted Answer · 2018-01-17 20:02:51Z

0

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.

edited Jan 17, 2018 at 20:02

answered Jan 10, 2018 at 22:17

Pshemski

1191 silver badge9 bronze badges

Collectives™ on Stack Overflow

Updating forms dynamically in rails using javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related