Ruby-on-rails 将提交按钮图像添加到 Rails 表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5201361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a submit button image to a Rails form
提问by rottendevice
I'm creating a form in Rails for submitting comments, and I want the submit button to be an image, rather than an HTML button. In this bit of documentation, it says the code is image_submit_tag, but I can't get it to work in my code.
我正在 Rails 中创建一个用于提交评论的表单，我希望提交按钮是一个图像，而不是一个 HTML 按钮。在这个文档中，它说代码是image_submit_tag，但我无法让它在我的代码中工作。
Here's what I'm working with:
这是我正在使用的内容：
<% 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 %>
Thanks for the help.
谢谢您的帮助。
采纳答案by Zabba
You can do it like so:
你可以这样做：
ERB:
再培训局：
<%= f.submit "" %>
CSS:
CSS：
input[type="submit"]
{
background:url(mybutton.png);
}
回答by Tornskaden
I just fell over this one, trying to solve the same problem. A sudden thought made me just try something like this:
我刚刚摔倒了这个，试图解决同样的问题。一个突然的想法让我只是尝试这样的事情：
<%= f.submit "Comment", :type => :image, :src => "/images/comment-button.png" %>
Will create something like this:
将创建这样的东西：
<input id="comment_submit" name="commit" src="/images/comment-button.png" type="image" value="Comment" />
Try it out :-)
试试看 ：-）
回答by Olives
I believe the 'tag' methods cannot be called on the form builder object.
我相信不能在表单构建器对象上调用“标签”方法。
By 'tag' methods I mean things from the ActionView::Helpers::FormTagHelper module.
我所说的“标记”方法是指来自 ActionView::Helpers::FormTagHelper 模块的东西。
It should work if you do:
如果您这样做，它应该可以工作：
<div id="comment-button"><p>
<%= image_submit_tag("comment-button.png") %></p>
</div>
回答by Sayem Khan
Yup, the following should work:
是的，以下应该有效：
<%= image_submit_tag("comment-button.png") %></p>
http://apidock.com/rails/ActionView/Helpers/FormTagHelper/image_submit_tag
http://apidock.com/rails/ActionView/Helpers/FormTagHelper/image_submit_tag
回答by thomasfedb
Working from Zabba's example a more accessible solution would be:
根据 Zabba 的示例，一个更易于访问的解决方案是：
View:
看法：
<%= f.submit "Submit" %>
CSS:
CSS：
input[type="submit"]
{
background:url(mybutton.png);
text-indent: -9999em;
}
回答by akbarbin
Please using delete on line:
请在线使用删除：
<%= f.image_submit_tag("/assets/icon-search.png") %>
change into:
变成：
<%= image_submit_tag("/assets/icon-search.png") %>
more details on image_submit_tag
更多详情 image_submit_tag
回答by Nate914375
For rails 3.1 and above
对于导轨 3.1 及以上
<%= f.submit "Submit", :type => :image, :src => image_path("submit.png") %>
回答by Alexander Gorg
You can use the following JS trick.
您可以使用以下 JS 技巧。
1) In your application.js:
1) 在你的 application.js 中：
function submitFormWithoutButton(formId) {
document.getElementById(formId).submit();
}
2) Then in your form replace f.submitline(s) with:
2）然后在您的表单中将f.submit行替换为：
<%= link_to "#", onclick: "submitFormWithoutButton('ID_OF_YOUR_FORM')" do %>
<%= image_tag("PATH_TO_YOUR_AWESOME_ICON") %>
<% end %>
3) It takes only to replace uppercase placeholders with your form's id and path to the image file you want to use as a button.
3) 只需将大写占位符替换为表单的 id 和要用作按钮的图像文件的路径。
Now you can submit your forms through nice and obedient links instead of stubborn and tricky buttons!
现在，您可以通过漂亮而顺从的链接而不是顽固和棘手的按钮来提交表单！
Don't forget to vote up if that helps!
如果有帮助，请不要忘记投票！
