Rails 4:使用html预制表单作为Rails表单。HTML表单到Rails表单

用户名

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

我已经包含了它已经使用的所有框架,并且在我的应用程序中具有正确显示的形式,但是我还没有找到一种简单的方法来使其与我的Controller&Model很好地兼容。

有没有简单的方法可以在我的应用程序中使用此预制设计?基本上,我问的是如何仅使用纯HTML / CSS将输入表单数据传递到Controller中。当我尝试传递它时,我不断收到authenticity_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

我在代码和建议中遇到的错误是:“ ContactsController#create中的ActionController :: InvalidAuthenticityToken”

还有其他想法吗?

我的application.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)
阿斯温·拉玛克里希南(Aswin Ramakrishnan)

好的。这是您需要做的-

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控制器。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章