HTML code inside buttons with simple_form

Question

I'm new to rails, and just found the simple_form gem. I installed it with bootstrap suport, but now I can't get this code to work the way I want it

<%= f.button :submit, "<i class='icon-ok icon-white'></i> Save", class: "btn btn-primary" %>

I just want to put the icon inside the button, but when I do this, it shows me a button with the text '<i class='icon-ok icon-white'></i> Save'

I also tried to do

<%= f.button :submit, class: "btn btn-primary" do %><i class="icon-ok icon-white"></i> Save<% end %>

But with no success. How can I add some HTML inside the button with simple_form gem?

Heavyhanded

Answer 1

Don't use content_tag. The following works:

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

Albertson

Even if this solution works, I don't like it because I can't see the f variable anymore :( ... – Osman

@CyrilDD Why do you need to see the form builder so badly? All it is is a collection of methods to simplify building a form, using a model or class as reference. A submit button has no need to know about the model's structure like inputs do, so there is actually little reason to use the builder. Unfortunately Rails's handling of most of the view tier is a complete disaster and woefully in need of updating. There are far bigger issues. – Albertson

I don't need it "so badly". It's just tha in my code, I have many <%= f.something %> and for some reason a <%= button_tag %> shows up. Somewhat ugly. However, this (may ?) become a real problem for submitting nested forms... – Osman

@CyrilDD It's not a problem with nested forms, as you are actually submitting a single form with a single submit button. No matter how 'nested' it is, it's just clever use of a single form. Take a look at the rendered form. You'll see all the nesting is just encoded into the name attributes of the inputs and decoded at the other end. – Albertson

But what about "forms inside forms" ? Then we'd want to know which form we want to send... (though I can't think of any scenario where one would do this... maybe if we just want to post a subset of changes ?) – Osman

You cannot literally nest forms: w3.org/TR/html5/forms.html#the-form-element – Albertson

This makes a <button>, not an <input>, so the form isn't submitted on click. Am I missing something? – Austrasia

@Austrasia The button type is submit. – Albertson

Answer 2

In simple_form 3.0rc use :button button type (it passes your block to original ActiveView button helper):

<%= f.button :button do %>
  <i class="icon-save"></i>
  Commit
<% end %>

Or write additional button wrapper.

For additional info look into simple_form/form_builder.rb FormBuilder#button method.

Raffaello

Tried it, doesn't work. Writing a button wrapper sounds like a good idea, though. – Desegregate

For some reason this only works with :button, and not :submit. I'm using 3.1rc2 – Sporangium

When you use button method it passes your block to "#{type}_button" or "#{type}" helper. Simple form button helpers doesn't support blocks so using button_button helper that declared as alias_method :button_button, :button we call original method from ActionView::Helpers::FormBuilder. With :submit button type it's not possible. Read code of simple_form/form_builder.rb for better explanation. – Raffaello

this works, and should be the actual answer that solves it since it uses simple_form methods. – Cordeliacordelie

This should be the accepted answer. github.com/plataformatec/simple_form#buttons – Delvecchio

Answer 3

I think you can't do it with simple_form. But I have good news for you. You should be fine using rails helper along side with simple form.

just do

button_tag(type: 'submit', class: "btn btn-primary") do
  content_tag(:i, class: "icon-ok icon-white")
  "Save"
end

Not sure if this works, even the syntax but it should give you a hint

Grot

Answer 4

One line example submit button in Rails with bootstrap btn class:

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

Vantassel

Answer 5

You can do this with the following code:

= f.button :button, 'Send', data: { disable_with: "<i class='fi-heart'></i> Sending..." }

Note that you want to use f.button instead of f.submit Also note that :button needs to be the first param to f.button

Peptic

"Also note that :button needs to be the first param" thats solved my problem. i tried using :submit, which didn't work! it didn't parse the text to html, but when i changed to :button it worked perfectly. thanks – Joseph