Question

我在Rails中创建一个用于提交评论的表单，我希望提交按钮是图像，而不是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 %>

感谢您的帮助。

Answer 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" />

尝试一下： - ）

Answer 2

我认为无法在表单构建器对象上调用'tag'方法。

'tag'方法我的意思是来自ActionView :: Helpers :: FormTagHelper模块。

如果您这样做，它应该有效：

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

Answer 3

你可以这样做：

ERB：

<%= f.submit "" %>

CSS：

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

Answer 4

是的，以下应该有效：

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

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

Answer 5

从Zabba的例子开始，一个更容易理解的解决方案是：

查看：

<%= f.submit "Submit" %>

CSS：

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

Answer 6

请使用在线删除：

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

变成：

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

有关image_submit_tag

的更多详情

Answer 7

对于rails 3.1及以上

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

Answer 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和要用作按钮的图像文件的路径替换大写占位符。

现在，您可以通过漂亮且听话的链接提交表单，而不用通过顽固而棘手的按钮提交表单！

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

将提交按钮图像添加到Rails表单

8 个答案: