Substitute a Rails form submit button by a Bootstrap icon

Question

I have an app in which users and groups are linked by a many-to-many relationship.

I have a join table GroupUsers, and I would like to enable an user to add or remove a group from his directly in the group index, which is displayed as a table.

To add a group, I have added a form in one of the column of the index that creates a GroupUser entity. The problem is, I would like to use a Bootstrap icon-plus-sign to submit the form (the user_id and group_id are in hidden fields).

My column looks like this (in slim, . is substitute for class= in HTML parts) :

td
  = form_for @item, as: :group_user, url: "groups/#{group.id}/users" do |f|
    = f.hidden_field :user_id, :value => current_user.id
    = f.hidden_field :group_id, :value => group.id
    .form-actions
      = f.submit '' do 
        i.icon-plus-sign.icon.icon-large

For the moment, instead of only a plus sign I get an empty button in the table, what shall I do ?

PS: I've checked this answer: Add icon to submit button in twitter bootstrap 2, which includes a bootstrap icon inside the button, but I want to have the icon instead of the button.

You can't have icon instead of the button. Otherwise you won't be able to submit form. — bronislav, Jun 10 '14 at 09:20

score 4 · Accepted Answer · edited May 23 '17 at 10:32

4

As mentioned by bronislav you won't be able to submit your form without having a button. If you only want to display an image then i think in your case it'll be better to use an image of + icon and then you can use rails image_submit_tag. You can have

= f.image_submit_tag("icon.png")
# => <input alt="Login" src="/images/icon.png" type="image" />

For more information refer here

OR

You can do something like from here:

=button_tag(type: 'submit', class: "btn btn-primary") do
  %i.icon-plus-sign.icon.icon-large

edited May 23 '17 at 10:32

Community

1
1

answered Jun 10 '14 at 09:27

Mandeep

9,093
2
26
36

Thank you, it's still not what I want (it looks terrible with image_submit_tag), but I know I can't do it now. By the way, `f.image_submit_tag` won't work, nor will `f.image_submit`, only `image_submit_tag` is accepted. – user284130 Jun 10 '14 at 10:13
@user284130 If you are talking about image being terrible then you can use a [2x image](http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/) that will make it look better. – Mandeep Jun 10 '14 at 10:17
That's not the problem, it creates a button that is something like 4 times higher than a table lign, whatever the size of the image is. **EDIT** : I believe it's not a button, but the form itself. – user284130 Jun 10 '14 at 10:20
1

@user284130 You can give it a class and then adjust its width and height accordingly, that's more of a css and tables problem not rails :) – Mandeep Jun 10 '14 at 10:25
Just figured it out ! Thank you ! – user284130 Jun 10 '14 at 10:27

score 1 · Answer 2 · answered Oct 17 '18 at 15:29

With HAML you need to do something like this:

= button_tag(type: 'submit', class: 'btn btn-success') do
    %span.glyphicon.glyphicon-search{"aria-hidden" => "true"}

or with ERB

<%= button_tag(type: 'submit', class: 'btn btn-success') do %>
  <span aria-hidden="true" class="glyphicon glyphicon-search"></span>
<% end %>

score 0 · Answer 3 · answered Jun 10 '14 at 09:25

The submit button needs to be a button[type=submit] with the icon inside of it. <input type=submit /> elements cannot have node children, and therefore you cannot have an <i> element inside of it.

The HTML should look like this:

<button type="submit" class="btn btn-primary">
  <i class="icon-plus-sign icon icon-large"></i>
</button>

EDIT: In slim, I believe it would look like:

= content_tag :button, :type => 'submit', :class => 'btn btn.primary' do
  i.icon-plus-sign.icon.icon-large

Substitute a Rails form submit button by a Bootstrap icon

3 Answers3