Rails simple_form custom submit button. simple_form, bootstrap 3

custom_submit_simple_form.md

Custom submit button in simple_form and bootstrap 3

Objective

It is easy to add wrappers for input components in simple_form, but it takes some time to modify rendering of buttons ("f.button").

We want to have this in our form:

= f.button :submit_cancel, 'Save'

where "submit_cancel" is the name of our new component,

that will render submit button as:

<div class="form-group">
  <div class="col-sm-offset-4 col-sm-10">
    <input class="btn btn-primary" type="submit" value="Save" name="commit">
  </div>
</div>

or with :cancel option

=simple_form_for @order do |f|
  ... fields here ...

  = f.button :submit_cancel, 'Save', :cancel=>orders_path

will render

<div class="form-group">
  <div class="col-sm-offset-4 col-sm-10">
    <input class="btn btn-primary" type="submit" value="Save" name="commit">
    <a href="...">Cancel</a>
  </div>
</div>

Step 0.

install simple_form with wrappers for bootstrap:

rails generate simple_form:install --bootstrap

that will create two files:

config/initializers/simple_form.rb
config/initializers/simple_form_bootstrap.rb

Step 1. add custom component to simple_form

create a new file lib/simple_form_extensions/button_components.rb

module ButtonComponents
    def submit_cancel(*args, &block)
      template.content_tag :div, :class => "form-group" do
      template.content_tag :div, :class => "col-sm-offset-4 col-sm-10" do
        options = args.extract_options!
  
        # class
        options[:class] = [options[:class], 'btn-primary'].compact
  
        #
        args << options


        # with cancel link
        if cancel = options.delete(:cancel)
          submit(*args, &block) + '&nbsp;&nbsp;'.html_safe + template.link_to(I18n.t('simple_form.buttons.cancel'), cancel)
        else
          submit(*args, &block)
        end
  
      end
      end
    end
  
end

SimpleForm::FormBuilder.send :include, ButtonComponents

This component is suitable for horizontal form in bootstrap 3. To use it in other forms (vertical, inline) modify tags "template.content_tag" appropriately.

Step 2. Include component in initializer

# config/initializers/simple_form_bootstrap.rb

require 'button_components.rb'

SimpleForm.setup do |config|
    ...
end

Step 3. Translation

/config/locales/simple_form.en.yml

en: simple_form: buttons: cancel: "Cancel"

f.submit_bootstrap_html

<div class="form-group">
    <div class="col-sm-offset-4 col-sm-10">
        <input class="btn btn-primary" type="submit" name="commit" value="Save" />
    </div>
</div>

Neat. I had to do:

require 'simple_form_extensions/button_components.rb'

@billguy, you're right, otherwise we'll get cannot load such file -- button_components.rb

you're awesome. Thanks