Rails and bootstrap - Add HTML tags to a submit button text

Question

I have a form for a like/unlike button using ajax :

= form_for like, :html => { :method => :delete}, :remote => true do |f|
= f.submit pluralize(@video.likes.count, 'like'), :class => "btn btn-warning btn-mini", "data-disable-with"=> "Just a moment..."

The form works perfectly.

I would like to add an icon in front of the text in the submit button. The haml code for adding the icon is the following (twitter bootstrap) :

%i.icon-heart.icon-white

Is there a way to add this html to the button? I tried adding it as plain html, but rails rendered it as text.

UPDATE

I have manage to encapsulate the submit button in a span class which contains the icon and the appropriate styling. I now need to remove every styling on the button...

%span.btn.btn-danger.btn-mini
  %i.icon-heart.icon-white
  = f.submit pluralize(@video.likes.count, 'like')

Igniter

Answer 1

Thanks to ismaelga, I found this SO question.

This is the solution :

<%= button_tag(type: 'submit', class: "btn btn-primary") do %>
 <i class="icon-ok icon-white"></i> Save
<% end %>

Igniter

Even if this solution works, I don't like it because I can't see the f variable anymore :) Feels like submitting a form out of nowhere... – Panelist

This should not be the accepted answer. The question was to add html to the button "text" part of a form_for form builder helper, not reversing your steps into the manual button_tag view helper method. You should have used f.button type: :button, class: 'your_classes', { haml code here } – Retail

Answer 2

The accepted answer for the question itself will work but is more like a patch instead of the perfect solution keeping code style clear and consistent. It backtracks into using the standard and manual view method: #button_tag. I tend to avoid those manual methods like #submit_tag, #form_tag, #input_tag ... etc because they are unrelated to the backed model or form-model itself and you need to manually do everything on them. Even though the submit has no connection with the f. that every input in a form_for has like for e.g. f.input ..., it's about style, code readability and good programming practices. This code works perfectly fine (form_for and simple_form):

= f.button :button, type: :submit, class: 'class1 class2 ... classN' do
    = 'button call to action text'
    %i.fa.fa-download.ml5 // => haml icon as requested

Hope it helps others reaching this post like me trying to avoid _tag methods.

Retail

Answer 3

Another option could be button in place of submit

see Rails documentation FormBuilder#button

= f.button :class => "btn btn-warning btn-mini" do
  %i.icon-heart.icon-white
    = pluralize(@video.likes.count, 'like')

Overbold

Answer 4

Try this. I haven't tested but I think it's possible to do something like this.

= f.submit :class => "btn btn-warning btn-mini", "data-disable-with"=> "Just a moment..." do
  %i.icon-heart.icon-white
  = pluralize(@video.likes.count, 'like')
end

So this was possible if you where using simple_form. I'm sorry.

So another try would be

= f.submit "#{pluralize(@video.likes.count, 'like')} <i class='icon-heart icon-white'/>".html_safe, :class => "btn btn-warning btn-mini", "data-disable-with"=> "Just a moment..."

Cooperstein

I tried install SimpleForm and using your first answer, but it does not work. Your second neither.. – Igniter

Ah! Thanks to your answer, I found new keywords to search Google! this SO question was really helpful! – Igniter

I also answered that question :) Hope you can find a solution – Cooperstein

Thanks to you, I did find an answer :) This problem has been buggin me for a while! – Igniter

f.submit wont work, you need f.button with type submit and a block as last argument to output custom haml/html – Retail

Answer 5

Justin D's answer helped me also. If you're coming here from Google and you're looking for a Slim implementation, you can do it like this:

= button_tag(type: 'submit', class: 'btn btn-default') do
    span.glyphicon.glyphicon-floppy-disk>
    | Save
end

Slim users will recognize the >'s necessity.

This worked for me with Rails 4.1.5, Ruby 2.1.2, and bootstrap-sass 3.2 as of September 24, 2014.

Amortization

This saved me hours of frustration. +1! – Anguilliform

Answer 6

Soluction

= button_to('Add', line_item_path, method: :post , class: "btn btn-warning btn-lg" , params: { param1: 'value1',  param2: 'value2' })

http://qiita.com/tomomomo1217/items/a5f790c31670587e2d87

How to place an image inside of a link?

Zeralda

Answer 7

Please try the below code . It works

<%= f.submit :class => "btn btn-success btn-mini" %>

Feathering

It would be great to add some explanation. – Envision

Your answer doesn't include the html within the submit tag, so it doesn't include the icon. – Cyaneous

This does not answer the question – Retail