Is there a way with rails form helper to produce a button tag for submit

最后都变了- 提交于 2019-12-17 15:37:33

问题


I am trying to create buttons ala Wufoo (Rediscovering the button element)

I would like to write the following code like the following:

<%form_tag search_path, :method => :get, :class => 'search' do %>
  <%=text_field_tag :search, params[:search] -%>
  <%=button_tag 'search', :name => nil-%>
<%end%>

To generate the following HTML (instead of the input[type="submit"] tag)

<button type="submit" class="positive">
    <img src="/images/icons/tick.png" alt=""/> 
    Save
</button>

Does a method exist already? Or should I roll my own helper?


回答1:


You could use content_tag to achieve this. It's the more railsy way of doing what you want. But it's longer than the raw HTML.

<% content_tag :button :type => :submit, :class => :positive do %>
   <%= image_tag "icons/tick.png"%>
   Save
<% end %>

Which produces

<button type="submit" class="positive">
    <img src="/images/icons/tick.png" alt="Tick"/> 
    Save
</button>

However using this as a starting point you should have no problem rolling your own robust helper, or abstracting it to a partial.




回答2:


You can use the image_submit_tag helper to create an image submit tag, rather than wrapping the whole thing in a button:

<%
image_submit_tag("login.png")
# => <input src="/images/login.png" type="image" />

image_submit_tag("purchase.png", :disabled => true)
# => <input disabled="disabled" src="/images/purchase.png" type="image" />

image_submit_tag("search.png", :class => 'search-button')
# => <input class="search-button" src="/images/search.png" type="image" />
%>

This might not be what you're looking for, if you require the "Save" text to appear above the <img>




回答3:


Use The JQuery Cheats Gem https://github.com/plowdawg/jquery_cheats and in your view it is just

<%= submitimage("/path/to/image.png","Alternate Text") %>

NOTE: Alternate text is optional.



来源:https://stackoverflow.com/questions/2254720/is-there-a-way-with-rails-form-helper-to-produce-a-button-tag-for-submit

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!