241

My question is easy:

<%= f.submit %>

Where does the class declaration go? I'm getting errors on multiple attempts.

sscirrus
  • 55,407
  • 41
  • 135
  • 228

7 Answers7

386
<%= f.submit 'name of button here', :class => 'submit_class_name_here' %>

This should do. If you're getting an error, chances are that you're not supplying the name.

Alternatively, you can style the button without a class:

form#form_id_here input[type=submit]

Try that, as well.

Srdjan Pejic
  • 8,152
  • 2
  • 28
  • 24
  • Excellent! Thank you Srdjan. One little curiosity - I've tried using `disable_with` on these submit buttons but they never seem to work. Is there a reason why that you know of? +1 – sscirrus Mar 15 '11 at 18:09
  • 3
    Try with a hash for the options: {:class => 'class_name', :disable_with => 'Editing...' }. This'll go after the button name. It should work, or at least it's documented as that. – Srdjan Pejic Mar 15 '11 at 18:13
  • 3
    Note that you need to explicitly pass a string ('name of button here') as the first argument to `submit` in order to use the :class hash as in the answer above. If you don't have that string, you'll get an error message. – thewillcole Sep 15 '12 at 09:36
  • 8
    add class without removing default value answer here http://stackoverflow.com/questions/8811254/add-a-class-to-f-submit-but-keep-default-functionality – Naoise Golden Oct 16 '12 at 10:33
  • 2
    `<%= form.submit :class => 'class_name' %>` works, if you don't want to use name. –  Jul 12 '17 at 19:01
  • *"..chances are that you're not supplying the name.."* Exactly. But why name is mandatory when giving class? – Onur Dec 24 '21 at 08:47
173

You can add a class declaration to the submit button of a form by doing the following:

<%= f.submit class: 'btn btn-default' %> <-- Note: there is no comma!

If you are altering a _form.html.erb partial of a scaffold and you want to keep the dynamic change of the button name between controller actions, DO NOT specify a name 'name'.

Without specifying a name and depending on the action the form is rendered the button will get the .class = "btn btn-default" (Bootstrap class)(or whatever .class you specify) with the following names:

  • Update model_name

  • Create model_name
    (where model_name the name of the scaffold's model)

aloucas
  • 2,967
  • 1
  • 19
  • 15
  • 17
    Despite having fewer votes than the selected answer, this is the solution most people will want to use. – IAmNaN Nov 12 '13 at 19:41
  • 3
    This is what I was trying to find – Sandeep Garg May 14 '14 at 10:43
  • 2
    Useful, and permits adding an HTML attribute ("id" or "class," as in the example) without changing the default, Rails-generated button text. – TK-421 Dec 08 '14 at 14:50
  • 1
    IMO this is the best answer because it preserves the behavior of dynamically assigning text to the button ("Create" or "Update") based on the controller action – sixty4bit Oct 03 '15 at 01:30
  • Definitely as @sixty4bit said. Should be setting the button text in translation files, so the form can be reused across different controller actions, i.e. 'create comment' vs 'update comment'. See this answer -https://stackoverflow.com/a/18255633/5355691 – Jarvis Johnson Feb 13 '18 at 03:02
  • Seems really weird that no comma should be used. Why is that? – stevec Jul 23 '21 at 17:21
34

Rails 4 and Bootstrap 3 "primary" button

<%= f.submit nil, :class => 'btn btn-primary' %>

Yields something like:

screen-2014-01-22_02.24.26.png

Community
  • 1
  • 1
cwd
  • 53,018
  • 53
  • 161
  • 198
  • 2
    This is actually best because specifying `nil` for the name retains the helper's default behaviour where, if it finds an instance variable for the object being created/displayed, such as `@person`, it will name the button accordingly (Update Foo or Create Foo) and also the `form_for` FormBuilder chooses the correct action. So this way you can extract the form code into a partial and use it to display the model object (if you wish to use a form to display it), update it and create a new instance as well. – Paul-Sebastian Manole Mar 10 '15 at 15:20
14

As Srdjan Pejic says, you can use 

<%= f.submit 'name', :class => 'button' %>

or the new syntax which would be:

<%= f.submit 'name', class: 'button' %>
RailsZilla.com
  • 143
  • 1
  • 2
11

Add class key-value pair

<%= f.submit "Submit", class: 'btn btn-primary' %>
BenKoshy
  • 33,477
  • 14
  • 111
  • 80
2

By default, Rails 4 uses the 'value' attribute to control the visible button text, so to keep the markup clean I would use

<%= f.submit :value => "Visible Button Text", :class => 'class_name' %>
benjamin.patch
  • 49
  • 4
0

both of them works <%= f.submit class: "btn btn-primary" %> and <%= f.submit "Name of Button", class: "btn btn-primary "%>

gsumk
  • 809
  • 10
  • 15