向 Rails 表单添加提交按钮图像答案

【问题标题】：Adding a submit button image to a Rails form向 Rails 表单添加提交按钮图像
【发布时间】：2011-03-05 03:03:42
【问题描述】：

我正在 Rails 中创建一个用于提交 cmets 的表单，我希望提交按钮是图像，而不是 HTML 按钮。在this bit of documentation，它说代码是image_submit_tag，但我无法让它在我的代码中工作。

这是我正在使用的：

<% form_for [@post, Comment.new], :remote => true do |f| %>
<p>
    <%= f.label :body, "Add a comment" %><br />
    Name <%= f.text_field :name %><br />
    Website<%= f.text_field :website %><br />
    Twitter<%= f.text_field :twitter %><br />
    <%= f.text_area :body %>
</p>
<div id="comment-form">

    <div id="comment-button"><p>
        <%= f.image_submit_tag("comment-button.png") %></p>
        </div>
</div>
<% end %>

感谢您的帮助。

【问题讨论】：

会发生什么？您可以发布错误消息吗？
我在 Rails 3.0.3 中得到 undefined method 'image_submit_tag' for #<ActionView::Helpers::FormBuilder:0xb6cdde88>。这是一个新的表单生成器助手吗（v3.0.5 的文档将其列为一个......）

标签： ruby-on-rails ruby ruby-on-rails-3

【解决方案1】：

我刚刚跌倒在这个，试图解决同样的问题。一个突然的想法让我尝试了这样的事情：

<%= f.submit "Comment", :type => :image, :src => "/images/comment-button.png" %>

将创建如下内容：

<input id="comment_submit" name="commit" src="/images/comment-button.png" type="image" value="Comment" />

试试看 :-)

【讨论】：

太棒了，谢谢。在我的情况下，css 方式不好，因为我有“提交”按钮的数据库驱动图像。
对于 rails >=3.1 的注意事项，由于资产管道，您需要使用帮助程序：:src => image_path("submit.png")
这个答案很准确。没有乱用 CSS，只是纯粹的很棒的 Rails 代码。作为公认的答案会很好。

【解决方案2】：

我相信不能在表单构建器对象上调用“标记”方法。

“标记”方法是指来自 ActionView::Helpers::FormTagHelper 模块的东西。

如果你这样做，它应该可以工作：

<div id="comment-button"><p>
  <%= image_submit_tag("comment-button.png") %></p>
</div>

【讨论】：

【解决方案3】：

你可以这样做：

ERB：

<%= f.submit "" %>

CSS：

input[type="submit"]
{
  background:url(mybutton.png);
}

【讨论】：

没错！花了一点 CSS 样式，但现在看起来不错，谢谢。
让每个人都可以轻松访问它，请参阅 thomasfedb 的回答。

【解决方案4】：

是的，以下应该可以工作：

  <%= image_submit_tag("comment-button.png") %></p>

http://apidock.com/rails/ActionView/Helpers/FormTagHelper/image_submit_tag

【讨论】：

【解决方案5】：

根据 Zabba 的示例，一个更易于访问的解决方案是：

查看：

<%= f.submit "Submit" %>

CSS：

input[type="submit"]
{
  background:url(mybutton.png);
  text-indent: -9999em;
}

【讨论】：

【解决方案6】：

请在线删除：

<%= f.image_submit_tag("/assets/icon-search.png") %>

改成：

<%= image_submit_tag("/assets/icon-search.png") %>

更多详情image_submit_tag

【讨论】：

【解决方案7】：

适用于 rails 3.1 及以上版本

<%= f.submit "Submit", :type => :image, :src => image_path("submit.png") %>

【讨论】：

【解决方案8】：

你可以使用下面的 JS 技巧。

1) 在您的 application.js 中：

function submitFormWithoutButton(formId) {
  document.getElementById(formId).submit(); 
}

2) 然后在您的表单中将f.submit 行替换为：

<%= link_to "#", onclick: "submitFormWithoutButton('ID_OF_YOUR_FORM')" do %>
  <%=  image_tag("PATH_TO_YOUR_AWESOME_ICON") %>
<% end %>

3) 只需将大写占位符替换为表单的 id 和要用作按钮的图像文件的路径。

现在您可以通过漂亮而顺从的链接而不是顽固和棘手的按钮来提交您的表单！

如果有帮助，别忘了投票！

【讨论】：