Rails - form_tag提交

Question

我使用form_tag创建了一个Rails表单。我已经将一个前端项目移动到Rails，其中包含大量代码，具体取决于表单元素的现有id，因此我使用表单标记帮助程序来完成我的工作。我在提交表单时遇到问题，并且收到错误说： param丢失或值为空：home

我理解这种情况正在发生，因为我的参数不会嵌套在家里，如果我使用了form_for（@home），嵌套就会自动完成。

我该如何解决这个问题？

的routes.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  get '/home', to: 'home#index'
  get '/home/new', to: 'home#new'
  get 'home/:id', to: 'home#show'
  post '/home', to: 'home#create', as: :homes
end

new.html.erb

<div class="container-div">
  <!-- Colored FAB button with ripple -->
  <button id="fab" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
    <i class="material-icons">add</i>
  </button>
  <div class="demo-card-wide mdl-card mdl-shadow--2dp">
    <div class="mdl-card__title" id="text-div">
      <h2 id="title-text" class="mdl-card__title-text">CAMPAIGN</h2>
      <br>
      <br>
      <span id="success">Success!</span>
    </div>
    <div class="mdl-card__supporting-text">

      <%= form_tag '/home', method: :post, id: 'campaign_form' do %>

          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <%= text_field_tag :campaign_name,nil,:class => "mdl-textfield__input"%>
            <label class="mdl-textfield__label" for="campaign_name">Campaign Name</label>
          </div>

          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <%= text_field_tag :phone_number_receiver,nil,:class => "mdl-textfield__input",:type => "number" %>
            <label class="mdl-textfield__label" for="phone_number_receiver">Phone Number for recipient</label>
            <span class="mdl-textfield__error">Input is not a number!</span>
          </div>

          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <%= text_field_tag :start_date,nil,:class => "mdl-textfield__input"%>
            <label class="mdl-textfield__label" for="start_date" id="start-date-label">Enter start date</label>
          </div>


          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <%= text_field_tag :end_date,nil,:class => "mdl-textfield__input"%>
            <label class="mdl-textfield__label" for="end_date" id="end-date-label">Enter end date</label>
          </div>

          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <%= text_field_tag :start_time,nil,:class => "mdl-textfield__input"%>
            <label class="mdl-textfield__label" for="start_time" id="start-time-label">Enter time</label>
          </div>

          <div class="mdl-textfield mdl-js-textfield less-margin mdl-textfield--floating-label">
            <%= text_area_tag :sms_msg, nil,:class => "mdl-textfield__input", :rows => 8, :cols => 40 %>
            <label class="mdl-textfield__label" for="sms_msg">Text Message</label>

          </div>

          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <%= text_field_tag :break_msg,"1",:class => "mdl-textfield__input"%>
            <label class="mdl-textfield__label" for="break_msg">Number of Pages</label>
          </div>
      <%end%>


    </div>
  </div>
</div>

home_controller.rb

class HomeController < ApplicationController
  def index
    @campaigns = Home.all
  end

  def new
    @home = Home.new
  end

  def show
    @campaign = Home.find(params[:id])
  end

  def create
    home_params = params.require(:home).permit(:campaign_name,:phone_number_receiver,:start_date,:end_date,:start_time,:sms_msg)
    @home = Home.new(home_params)
    @home.save
  end
end

我正在使用jQuery提交表单，因为我在form_tag外面有我的提交按钮。 app，js拥有所有代码，这些代码取决于表单元素的id。

app.js

ready = function(){
    $('.mdl-card__supporting-text').hide();
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    $('#fab').click(function(){

        var innerHtml = $('#fab .material-icons').html();
        if (innerHtml === 'add'){
            $('#fab').css('background-color','green');
            $('#fab .material-icons').html('check circle');
            $('.mdl-card__supporting-text').show();
            $('.mdl-card__title').hide();
        }

        else {
            $('#campaign_form').submit();
            $('.mdl-card__supporting-text').hide();
            $('#fab').css('background-color','#ed2553');
            $('#fab .material-icons').html('add');
            //$('.mdl-card__title').show();
            //$('#title-text').text('Campaign added!');
        }

    });

    $('sms_msg').keyup(function(){
        var Length = $('#sms_msg').val().length;
        var pageBreak = Math.floor((Length/160));
        $('#break_msg').val(pageBreak+1);
    });

    var inputStartDate = document.querySelector('#start_date');
    var outputStartDate = document.querySelector('#start-date-label');

    var inputEndDate = document.querySelector('#end_date');
    var outputEndDate = document.querySelector('#end-date-label');

    var inputStartTime = document.querySelector('#start_time');
    var outputStartTime = document.querySelector('#start-time-label');


    var dialogStartDate = new mdDateTimePicker.default({
        type: 'date',
        orientation: 'PORTRAIT',
        past: moment().subtract(150,'years'),
        future: moment().add(50,'years')
    });

    dialogStartDate.trigger = inputStartDate;

    if (inputStartDate) {
        inputStartDate.addEventListener('click', function() {
            dialogStartDate.toggle();
            $('.container-div').toggle();
        });

        inputStartDate.addEventListener('onOk', function() {
            var startDate = dialogStartDate.time.toString();
            var startDateFormat = moment(startDate).format('LL');
            outputStartDate.innerHTML = startDateFormat;
            $('#start-date-label').css('color','blue');
            $('.container-div').show();
        });

        inputStartDate.addEventListener('onCancel',function(){
            $('.container-div').show();
        });
    }




    var dialogEndDate = new mdDateTimePicker.default({
        type: 'date',
        orientation: 'PORTRAIT',
        past: moment().subtract(150,'years'),
        future: moment().add(150,'years')
    });

    dialogEndDate.trigger = inputEndDate;

    if (inputEndDate) {
        inputEndDate.addEventListener('click', function() {
            dialogEndDate.toggle();
            $('.container-div').toggle();
        });

        inputEndDate.addEventListener('onOk', function() {
            var endDate = dialogEndDate.time.toString();
            var endDateFormat = moment(endDate).format('LL');
            outputEndDate.innerHTML = endDateFormat;
            $('#end-date-label').css('color','blue');
            $('.container-div').show();
        });

        inputEndDate.addEventListener('onCancel',function(){
            $('.container-div').show();
        });
    }



    var dialogStartTime = new mdDateTimePicker.default({
        type: 'time',
        orientation: 'PORTRAIT',
    });

    dialogStartTime.trigger = inputStartTime;

    if (inputStartTime) {
        inputStartTime.addEventListener('click', function() {
            dialogStartTime.toggle();
            $('.container-div').toggle();
        });

        inputStartTime.addEventListener('onOk', function() {
            $('.container-div').show();
            var startTime = dialogStartTime.time.toString();
            var startTimeFormat = moment(startTime).format('LTS');
            outputStartTime.innerHTML = startTimeFormat;
            $('#start-time-label').css('color','blue');
        });

        inputStartTime.addEventListener('onCancel',function(){
            $('.container-div').show();
        });
    }



}

$(document).ready(ready);
$(document).on("page:change", ready);