CODEWITHSUNDEEP
ruby-on-railsrubyruby-on-rails-3
rottendevice
rottendevice

Reputation: 2879

Adding a submit button image to a Rails form

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.

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.

Upvotes: 16

Views: 30462

Answers (8)

Alexander Gorg
Alexander Gorg

Reputation: 1078

You can use the following JS trick.

1) In your application.js:

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

2) Then in your form replace f.submit line(s) with:

<%= 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.

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!

Upvotes: 0

Nate914375
Nate914375

Reputation: 192

For rails 3.1 and above

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

Upvotes: 1

akbarbin
akbarbin

Reputation: 5105

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

Upvotes: 2

Sayem Khan
Sayem Khan

Reputation: 562

Yup, the following should work: 

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

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

Upvotes: 7

Tornskaden
Tornskaden

Reputation: 2273

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 :-)

Upvotes: 53

Kyle d&#39;Oliveira
Kyle d&#39;Oliveira

Reputation: 6382

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.

It should work if you do:

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

Upvotes: 13

thomasfedb
thomasfedb

Reputation: 5983

Working from Zabba's example a more accessible solution would be:

View:

<%= f.submit "Submit" %>

CSS:

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

Upvotes: 4

Zabba
Zabba

Reputation: 65457

You can do it like so:

ERB:

<%= f.submit "" %>

CSS:

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

Upvotes: 9

Related Questions