Rails 4：使用 html 预制表单作为 rails 表单。 HTML 表单到 Rails 表单答案

【问题标题】：Rails 4: Use an html premade form as a rails form. HTML form to Rails formRails 4：使用 html 预制表单作为 rails 表单。 HTML 表单到 Rails 表单
【发布时间】：2015-02-13 03:14:06
【问题描述】：

我正在尝试在我的应用程序中使用预制的通用 HTML/CSS/Javascript 表单作为 Rails 表单。我一直使用 rails form_for 创建表单，但我正在尝试使用来自 CodeCanyon 的套件/框架，名为 Munda Forms。

我已经包含了它已经使用的所有框架，并且表单在我的应用程序中看起来正确，但我还没有找到一种简单的方法让它与我的控制器和模型很好地工作。

有没有一种简单的方法可以在我的应用中使用这种预制设计？基本上，我在问如何只使用直接的 HTML/CSS 将输入表单数据传递到我的控制器中。当我尝试传递它时，我不断收到authentity_token 错误，因为我没有使用Rails form_for 助手。

提前致谢！

这是我可以向您展示的最简单的示例。这是我给出的 HTML 示例。我也获得了 CSS 和 Javascript，但我认为没有必要进行编辑。

下面是我正在编辑的视图 (_client_form1.html.erb)。

<div class="form-container tabs-form animated fadeInDown">
<form action="" method="post" enctype="multipart/form-data" id="tabs-form" class="rcw-form container-fluid">
<header>
  <h3 class="form-main-heading">Page 1/4: Basic Info</h3>
</header>
<fieldset class="row">
  <div class="col-md-12">
    <legend><span>Select your charge.</span></legend>
  </div>
  <div class="form-group col-md-12">
    <div id="tabs-example-1">
      <ul>
        <li><a href="#tab-1"><span class="icon-home22"></span>DUI</a></li>
        <li><a href="#tab-2"><span class="icon-globe"></span>DWAI</a></li>
        <li><a href="#tab-3"><span class="icon-newspaper3"></span>DUID</a></li>
      </ul>
      <div id="tab-1">
        <p>TAB1 TAB1 TAB1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, omnis.</p>
      </div>
      <div id="tab-2">
        <p>TAB2 TAB2 TAB2 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div id="tab-3">
        <p>TAB3 TAB3 TAB3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, consectetur.</p>
      </div>
    </div>
  </div>
</fieldset>

<fieldset class="row">
  <div class="form-group col-md-12"><span class="label">Number of Offenses</span>
    <div class="row">
      <div class="col-sm-10">
        <div id="increments-slider"></div>
      </div>
      <div class="col-sm-2"><span id="increments-amount" class="amount"></span></div>
    </div>
  </div>
</fieldset>

<fieldset class="row">
  <div class="form-group col-md-4">
    <label for="zipcode" class="sr-only">Zip Code</label>
    <input type="text" name="zipcode" id="zipcode" placeholder="Zip Code" class="form-control ff-rounded">
  </div>
</fieldset>

<footer class="ff-rounded-b">
  <input type="submit" name="submit" value="Submit" style="margin-right: 10px;" class="btn btn-primary ff-rounded">
</footer>

这是我的控制器，(contacts_controller.rb) 一个非常基本的邮件程序。我的contact.rb模型

 class ContactsController < ApplicationController

 def new
   @contact = Contact.new
 end

 def create
   @contact = Contact.new(params[:contact])
   @contact.request = request

   if @contact.deliver
     flash[:success] = "Thanks for reaching out. We will get back to you back shortly!"
     redirect_to '/'
   else
     render 'new'
   end
 end

end

如果有帮助，我还添加了我的模型接受的字段。

class CreateContacts < ActiveRecord::Migration
  def change
    create_table :contacts do |t|
      t.string :name
      t.string :email
      t.string :phone
      t.string :offenseType
      t.string :offenseNumber
      t.string :bestDay
      t.string :rankImportance
      t.string :comments

      t.timestamps
    end
  end
end

我的代码和您的建议的错误是：“ActionController::InvalidAuthenticityToken in ContactsController#create”

还有其他想法吗？

我的应用程序.html：

<!DOCTYPE html>
<html>
<head>
  <title> <%= full_title(yield(:title)) %> </title>

  <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>

  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>

  <%= csrf_meta_tags %>

  <%= favicon_link_tag %>

  <%= render 'layouts/shim' %>
</head>
<body>

    <%= render 'layouts/header' %>

    <div style="margin-bottom: 100px;"> </div>

    <%= yield %>

    <div class="container">
        <%= render 'layouts/footer' %>
    </div>

</body>
</html>

routes.rb:

resources :contacts, only: [:new, :create]
    match '/contact_us', to: 'contacts#new',       via: 'get'
    match '/contact_us', to: 'contacts#create',    via: 'post'

使用 Aswin Ramakrishnan 发布的 html 代码和脚本，这是 webBrick 服务器的输出。

Started POST "/contacts" for 127.0.0.1 at 2015-02-12 23:26:58 -0700
Processing by ContactsController#create as HTML
  Parameters:   {"authenticity_token"=>"uybxcY9FfrfoYo/UrvChbYPp3oB8aBv3YLu2u1e4/JE=", "contact"=>{"name"=>"test name", "email"=>"test email", "phone"=>"5555555555"}}
  Rendered contacts/_client_form5.html.erb (0.2ms)
  Rendered contacts/new.html.erb within layouts/application (1.1ms)
  Rendered layouts/_shim.html.erb (0.2ms)
  Rendered layouts/_header.html.erb (0.2ms)
  Rendered layouts/_footer.html.erb (0.2ms)

Completed 200 OK in 36ms (Views: 33.9ms | ActiveRecord: 0.0ms)

【问题讨论】：

Rails 表单最终呈现为 HTML 表单。例如，您可以发布一个表格吗？连同您的控制器代码。我们可以告诉您您需要做什么。
解决了令牌问题后，您遇到了什么错误？
我已经添加了来自 Aswin 的给定分析器的情况。

标签： html ruby-on-rails ruby forms ruby-on-rails-4

【解决方案1】：

好的。这是你需要做的 -

创建一个application.html.erb，如果您还没有。它应该看起来像这样 -

<!DOCTYPE html>
<html>
<head>
  <title>Your Application Title</title>
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>  
</head>
<body>
  <!-- Any Master Page content that you'd want -->
  <%= yield %>
</body>
</html>

您的控制器与您发布的 HTML 之间没有任何联系。尽管我不会按照您想要的方式编辑 HTML，但我可以展示 HTML 表单如何提交到 rails 控制器。它看起来像这样 -

$(document).ready(function() {
  $('#myFormAuthToken').val($('input[name="authenticity_token"]').val());
  $('#myFormAuthToken').attr('name', 'authenticity_token');
  
  $('button').click(function(){
    $('div').html($('form').serialize());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name="authenticity_token" value="j5m1CY+P0PEByd8/9U4y5xSqAMR4j2xE78F5NAZ0KDU="/>

<form id="new_contact" method="post" enctype="multipart/form-data" action="/contacts" accept-charset="UTF-8">
  <input id="myFormAuthToken" type="hidden" />Your Name:
  <input type="text" id="contact_name" name="contact[name]" placeholder="Contact's Name" />
  <br/>
  <br/>Your email:
  <input type="text" id="contact_email" name="contact[email]" placeholder="Contact's Email" />
  <br/>
  <br/>Your phone:
  <input type="text" id="contact_phone" name="contact[phone]" placeholder="Contact's Phone" />
  <br/>
  <br/>
  <button type="submit">Submit the form</button>
</form>

<br/><br/>
<b>Serialized Data:</b><div></div>

我想你明白了，名称应该采用 object[attribute_name] 格式，以便 HTML 表单提交给 Rails 控制器。

【讨论】：

那仍然行不通。我附上了我的 application.html 的外观，它与您的外观非常相似。我仍然遇到同样的错误。当调用 Rails 助手 form_for( ) 时，它会自动转换为 html，并且输出的 html 包含缺少的真实性令牌。
你在使用 jQuery 吗？
是的。该表单确实使用 jquery。我另外找到了 Rails 助手：但这仍然失败，这次无法成功调用控制器的“创建”方法并发送电子邮件。另一方面，如果我使用 Rails form_for 助手，它将正确发送。
是的。你也可以使用它。或者您可以使用从 application.html.erb 注入的authenticity_token 值
好的。我已经更新了答案。正如我所展示的，您应该能够通过 jQuery 包含真实性令牌。