rails 多按钮表单

简介:
在以往的rails应用中,表单一般都是一个create提交按钮.现在可以通过分析按钮背后的动作来添加按钮以实现其他功能:
譬如,对于一个表单,既可以点击create创建,也可以点击preview预览

下面是表单的代码:

<p>
    <b>Title</b><br />
    <%= f.text_field :title %>
  </p>

  <p>
    <b>Content</b><br />
    <%= f.text_area :content %>
  </p>

  <p>
    <%= submit_tag "Create" %>
    <%= submit_tag "Preview", :name=>"preview_button" %>
</p>

在submit_tag中,对按钮的名字进行了赋值,作用就是将其区别开来,如果没有赋值,那么默认的submit_tag按钮的名字是commit也就是说,在点击create按钮之后,返回controller的参数列表大致是这样:

Parameters: {"commit"=>"Create", "project"=>{"title"=>"project 1 ", "content"=>" project's content"}, "action"=>"create", "controller"=>"projects"}

如果点击preview,返回的参数列表:

  Parameters: {"preview_button"=>"Preview", "project"=>{"title"=>"project", "content"=>"project's content"}, "action"=>"create", "controller"=>"projects"}

在controller里可以对返回的参数中的preview_button是否有值来判断是否点击了这个按钮.
所以在controller中,create方法是这样的:

  def create
    @project = Project.new(params[:project])

    respond_to do |format|
       if params[:preview_button] || !@project.save 
        format.html { render :action => "new" }
        format.xml  { render :xml => @project.errors.to_xml }
      
      else
        flash[:notice] = 'Project was successfully created.'
        format.html { redirect_to project_url(@project) }
        format.xml  { head :created, :location => project_url(@project) }
     end
    end
  end

如果params[:preview_button]非空,那么在new模板中将preview的内容显示出来:

<h1>New project</h1>
<div id="preview">
    <hr>
    <% if params[:preview_button] %>
        <h2><%= @project.title %></h2>
        <%= textilize @project.content %>
    <% end -%>
    <hr>
    
</div>
<%= error_messages_for :project %>

<% form_for(:project, :url => projects_path) do |f| %>
  <%= render :partial => "form", :locals=>{:f=>f} %>
<% end %>

<%= link_to 'Back', projects_path %>




本文转自 fsjoy1983 51CTO博客,原文链接:http://blog.51cto.com/fsjoy/114517,如需转载请自行联系原作者
目录
相关文章
|
6月前
|
前端开发 API 数据处理
laravel系列(三) Dcat admin框架工具表单以及普通表单的使用
laravel系列(三) Dcat admin框架工具表单以及普通表单的使用
246 0
|
JavaScript
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
1880 0
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
|
5月前
|
JavaScript
vue2.0 + element-ui 实战项目-点击按钮弹出form表单(五)
vue2.0 + element-ui 实战项目-点击按钮弹出form表单(五)
200 0
|
12月前
|
数据格式 索引
uniapp——左滑编辑删除按钮实现,以及表单验证
左滑编辑删除按钮实现,以及表单验证
602 0
学习笔记jira项目65-用url参数管理模态框项目
学习笔记jira项目65-用url参数管理模态框项目
53 0
学习笔记jira项目65-用url参数管理模态框项目
jira项目笔记9-封装输入框和下拉框组件(不用ant之前)
jira项目笔记9-封装输入框和下拉框组件(不用ant之前)
94 0
jira项目笔记9-封装输入框和下拉框组件(不用ant之前)
|
存储 SQL 前端开发
Django Blog | 10 自定义Form,美化页面并实现文章编辑功能
Django Blog | 10 自定义Form,美化页面并实现文章编辑功能
377 0
Django Blog | 10 自定义Form,美化页面并实现文章编辑功能
|
开发者
表单控件|学习笔记
快速学习表单控件
75 0
表单控件|学习笔记
【selenium】表单切换与弹窗问题
简介:【selenium】表单切换与弹窗问题
【selenium】表单切换与弹窗问题
|
JavaScript 数据安全/隐私保护
Ant Design Vue表单自动填充账号密码问题
Ant Design Vue表单自动填充账号密码问题
748 0
Ant Design Vue表单自动填充账号密码问题