Generates a form containing a single button that submits to the URL created
by the set of options. This is the safest method to ensure
links that cause changes to your data are not triggered by search bots or
accelerators. If the HTML button does not
work with your layout, you can also consider using the link_to
method with the :method modifier as described in the
link_to documentation.
By default, the generated form element has a class name of
button_to to allow styling of the form itself and its
children. This can be changed using the :form_class modifier
within html_options. You can control the form submission and
input element behavior using html_options. This method accepts
the :method modifier described in the link_to
documentation. If no :method modifier is given, it will
default to performing a POST operation. You can also disable the button by
passing disabled: true in html_options. If you
are using RESTful routes, you can pass the :method to change
the HTTP verb used to submit the form.
Options
The options hash accepts the same options as
url_for.
There are a few special html_options:
-
:method- Symbol of HTTP verb. Supported verbs are:post,:get,:delete,:patch, and:put. By default it will be:post. -
:disabled- If set to true, it will generate a disabled button. -
:data- This option can be used to add custom data attributes. -
:remote- If set to true, will allow the Unobtrusive JavaScript drivers to control the submit behavior. By default this behavior is an ajax submit. -
:form- This hash will be form attributes -
:form_class- This controls the class of the form within which the submit button will be placed -
:params- Hash of parameters to be rendered as hidden fields within the form.
Data attributes
-
:confirm- This will use the unobtrusive JavaScript driver to prompt with the question specified. If the user accepts, the link is processed normally, otherwise no action is taken. -
:disable_with- Value of this parameter will be used as the value for a disabled version of the submit button when the form is submitted. This feature is provided by the unobtrusive JavaScript driver.
Examples
<%= button_to "New", action: "new" %>
# => "<form method="post" action="/controller/new" class="button_to">
# <div><input value="New" type="submit" /></div>
# </form>"
<%= button_to "New", new_articles_path %>
# => "<form method="post" action="/articles/new" class="button_to">
# <div><input value="New" type="submit" /></div>
# </form>"
<%= button_to [:make_happy, @user] do %>
Make happy <strong><%= @user.name %></strong>
<% end %>
# => "<form method="post" action="/users/1/make_happy" class="button_to">
# <div>
# <button type="submit">
# Make happy <strong><%= @user.name %></strong>
# </button>
# </div>
# </form>"
<%= button_to "New", { action: "new" }, form_class: "new-thing" %>
# => "<form method="post" action="/controller/new" class="new-thing">
# <div><input value="New" type="submit" /></div>
# </form>"
<%= button_to "Create", { action: "create" }, remote: true, form: { "data-type" => "json" } %>
# => "<form method="post" action="/images/create" class="button_to" data-remote="true" data-type="json">
# <div>
# <input value="Create" type="submit" />
# <input name="authenticity_token" type="hidden" value="10f2163b45388899ad4d5ae948988266befcb6c3d1b2451cf657a0c293d605a6"/>
# </div>
# </form>"
<%= button_to "Delete Image", { action: "delete", id: @image.id },
method: :delete, data: { confirm: "Are you sure?" } %>
# => "<form method="post" action="/images/delete/1" class="button_to">
# <div>
# <input type="hidden" name="_method" value="delete" />
# <input data-confirm='Are you sure?' value="Delete Image" type="submit" />
# <input name="authenticity_token" type="hidden" value="10f2163b45388899ad4d5ae948988266befcb6c3d1b2451cf657a0c293d605a6"/>
# </div>
# </form>"
<%= button_to('Destroy', 'http://www.example.com',
method: "delete", remote: true, data: { confirm: 'Are you sure?', disable_with: 'loading...' }) %>
# => "<form class='button_to' method='post' action='http://www.example.com' data-remote='true'>
# <div>
# <input name='_method' value='delete' type='hidden' />
# <input value='Destroy' type='submit' data-disable-with='loading...' data-confirm='Are you sure?' />
# <input name="authenticity_token" type="hidden" value="10f2163b45388899ad4d5ae948988266befcb6c3d1b2451cf657a0c293d605a6"/>
# </div>
# </form>"
#
Please login to continue.