Magic Submit Button for Simple Form

Dependency Status

A smart submit button extension for the Simple Form gem that:

  • Displays an alternate title on validation errors.
  • Displays a different "Loading..." title depending on whether the model is being created or updated.
  • Is optionally postfixed with a "Cancel" link.
  • Is fully localizable via the I18n gem.

A picture's worth a thousand words, right?

For a newly created model object, typically in a new.html.haml:

A preview of the submit button in the simples case.

Add a cancel link:

A preview of the submit button accompanied by a Cancel link.

When something goes wrong and the model fails validation:

A preview of the submit button with a different title when the validation has failed.

And all this and a bit more with just a single line of code:

= f.button :magic_submit, cancel: root_path

Installation

Add this line to your application's Gemfile:

gem 'simple_form-magic_submit'

And then execute:

$ bundle

Or install it yourself as:

$ gem install simple_form-magic_submit

Usage

In your view template add it allong the lines of:

= simple_form_for(resource) do |f|
    = f.error_notification
    .form-inputs
        = f.input :email, autofocus: true
    .form-actions
        = f.button :magic_submit

The last one is this gem's magic.

To add a cancel link:

= simple_form_for(resource) do |f|
    = f.error_notification
    .form-inputs
        = f.input :email, autofocus: true
    .form-actions
        = f.button :magic_submit, cancel: root_path

Replace root_path with whatever path is relevant for your app.

Localization

The gem comes bundled with an English translation in en.yml:

en:
  simple_form:
    magic_submit:
      default:
        new:
          submit: "Create a new %{model}"
          retry: "Try creating once again"
          disable_with: "Creating…"
        edit:
          submit: "Save changes"
          retry: "Try saving once again"
          disable_with: "Saving…"
      cancel:
        format: "%{submit_button} or %{cancel_link}"
        cancel: "Cancel"

Simply copy the file to you config/locales folder inside your Rails project if you want to change the default strings.

Say, for the title the keys will be looked up in the following order:

  1. simple_form.magic_submit.namespace_name.controller_name.model_name.action.submit
  2. simple_form.magic_submit.namespace_name.controller_name.action.submit
  3. simple_form.magic_submit.default.action.submit
  4. helpers.submit.action

Say, for a Admin::UsersController and a Roles model, the following lookups will be made on the edit action:

  1. simple_form.magic_submit.admin.users.roles.edit.submit
  2. simple_form.magic_submit.admin.users.edit.submit
  3. simple_form.magic_submit.default.edit.submit
  4. helpers.submit.edit

Each lookup will have %{model} interpolated to the name of the model.

To-do

  1. Add tests.
  2. Add more translations.
  3. You tell me.

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Thanks go to...

Victor Nahuel Chaves (https://github.com/nahue) for adding support for model-less forms.