Rails pass generated js params from form to controller

Question

I have a form_for with 2 date fields and 1 integer.

:start, id: "start"
:end, id: "end"
:number_of_days, id: "number_of_days"

my js:

$(document).ready(function(){
  $("#start, #end").on('change', function () {
    var start = $('#start').datepicker('getDate');
    var end = $('#end').datepicker('getDate');
    var duration = (end.getDate() - start.getDate())/1000/60/60/24;

    $("#number_of_days").val(duration);
  });
});

the value of the variable "duration" shows up fine in the :number_of_days field in the form, but how do I go on about passing the generated :number_of_days to the controller when submitting the form?

Thank you

Edit: form_for:

<%= form_for(@vacation) do |f| %>  
  <div class="row">
    <div class="large-2 columns"><%= f.label :start, "Starts On" %></div>
    <div class="large-10 columns left"><%= f.text_field :start, data:{ type: 'date'}, id: 'start' %></div>
    </div>

    <div class="row">
      <div class="large-2 columns"><%= f.label :end, "Ends On" %></div>
      <div class="large-10 columns left"><%= f.text_field :end, id: 'end' %></div>
    </div>
    <div class="row">
      <div class="large-2 columns"><%= f.label :number_of_days, "Duration In Days" %></div>
      <div class="large-10 columns left"><%= f.text_field :number_of_days, disabled: true, id: 'number_of_days' %></div>
    </div>
    <div class="row">
      <div class="large-10 large-offset-2 columns">
      <%= f.submit nil, class: 'button small radius success' %>
      </div>
    </div>
 <% end %>

Controller action new and create:

def new
  @vacation = Vacation.new
end

def create
  @vacation = Vacation.new(vacation_params)
  @vacation.user = current_user
  @vacation.number_of_days = params[:number_of_days]
  respond_to do |format|
    if @vacation.save
      format.html { redirect_to @vacation, notice: 'Vacation was successfully created.' }
    else
      format.html { render action: 'new'}
    end
  end
end

permit params in private:

def vacation_params
  params.require(:vacation).permit(:start, :number_of_days, :end)
end

you can try to find out the difference with ruby... do you already have? — jandresrodriguez, Jun 20 '14 at 05:01
it is actually a requirement in my project to instantly show the number of days in the designated text_field before submitting the form.. — Shalaby, Jun 20 '14 at 05:08
Is the number_of_days value not present in the params hash in the controller? — Patrick Oscity, Jun 20 '14 at 05:10
if you mean the strong params, yes it is there. but when I check through the rails console, it shows up as nil. — Shalaby, Jun 20 '14 at 05:11
Are you sure the number_of_days value isn't being passed in params when you submit form?? Can you please post what's being sent in params to controller's action? — Surya, Jun 20 '14 at 05:25
This line: `@vacation.number_of_days = params[:number_of_days]` should be: `@vacation.number_of_days = params[:vacation][:number_of_days]`. Did you try? — Surya, Jun 20 '14 at 05:33
Actually, I meant the params that you see in rails server on Terminal. :) — Surya, Jun 20 '14 at 05:34
i tried your suggestion, still nil. the params in terminal are all there but number_of_days is empty string (" ") — Shalaby, Jun 20 '14 at 05:38

Mandeep · Accepted Answer · 2014-06-20T06:25:49.017

1

Just looked at your form and noticed this:

<div class="large-10 columns left"><%= f.text_field :number_of_days, disabled: true, id: 'number_of_days' %></div>

You have disabled: true for this field so when you submit your form its value doesn't get submitted. You need to update your js file this:

$(document).ready(function(){
  $("#start, #end").on('change', function () {
    var start = $('#start').datepicker('getDate');
    var end = $('#end').datepicker('getDate');
    var duration = (end.getDate() - start.getDate())/1000/60/60/24;

    $("#number_of_days").val(duration).attr("disable","false");
  });
});

OR

A better solution would be to make your field readonly rather than disabling it. You could do it by:

<div class="large-10 columns left"><%= f.text_field :number_of_days, readonly: true, id: 'number_of_days' %></div>

edited Jun 20 '14 at 06:25

answered Jun 20 '14 at 06:18

Mandeep

9,093
2
26
36

I tried your suggesstion but that didn't work, I even removed the "disable: true" from the text field but it still won't do it, readonly doesn't get it to save still.. – Shalaby Jun 20 '14 at 06:29
what params are you getting after removing disable: true from the field? – Mandeep Jun 20 '14 at 06:31
"start" and "end" who have values, then "number_of_days" with value: " " ...I guess disabling or marking as read only don't affect passing the data.. – Shalaby Jun 20 '14 at 06:34
check this out http://stackoverflow.com/questions/1355728/values-of-disabled-inputs-will-not-be-submited – Mandeep Jun 20 '14 at 06:38
can you inspect your field by firebug if it's setting its vaue in form? your should something like: `` – Mandeep Jun 20 '14 at 06:41
thanks for the info, I've removed disabled: true and I even added a hidden field with number_of_days in the form, but its still not working.. – Shalaby Jun 20 '14 at 06:41
actually when I removed the disabled option and removed the hidden field from form it worked! I have no idea why the hidden_field stopped the param from saving...thanks mate you're a life saver. – Shalaby Jun 20 '14 at 06:44
just noticed your create method and there are bunch of problems there. you might want to fix it – Mandeep Jun 20 '14 at 06:47
I implemented Surya's suggestion by changing {@vacation.number_of_days = params[:number_of_days]} to {@vacation.number_of_days = params[:vacation][:number_of_days]} which helped...but yes got some sorting to do :) – Shalaby Jun 20 '14 at 06:51
1

@mobylak see what is essential to upload all the code at once ? – jandresrodriguez Jun 20 '14 at 13:42

Rails pass generated js params from form to controller

1 Answers1