我正在尝试将预制的通用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)
好的。这是您需要做的-
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] 删除。
我来说两句