Rails将生成的js参数从表单传递到控制器

Rails pass generated js params from form to controller

本文关键字：表单 控制器 参数 js Rails      更新时间：2023-09-26

我有一个form_for与2个日期字段和1个整数。

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

我的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);
  });
});

变量"duration"的值在表单中的:number_of_days字段中显示得很好，但是我如何在提交表单时将生成的:number_of_days传递给控制器?

谢谢编辑:

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 %>

控制器动作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

允许参数在私有:

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

看看你的表单，注意到这个:

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

你有禁用:true这个字段，所以当你提交你的表单，它的值不会被提交。你需要这样更新你的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).attr("disable","false");
  });
});

或

一个更好的解决方案是使您的字段只读，而不是禁用。你可以这样做: 
<div class="large-10 columns left"><%= f.text_field :number_of_days, readonly: true, id: 'number_of_days' %></div>
相关文章：