I'm using a front-end template, in my Rails application, that styles buttons with CSS by selecting them from the tag.
The problem is that Rails Form Helpers render buttons by producing HTML code with tags instead of tags. Therefore when executing the following html.erb code:
<%= simple_form_for @waiter do |f| %>
<%= f.input_field :email %>
<%= f.button :submit, "My button" %>
<% end %>
It renders the button as:
<input type="submit" name="commit" value="My button" class="btn btn-default" data-disable-with="My button">
And I'd like to produce an HTML code, for the button, that resembles:
<button relevant_attributes="relevant values">My button</button>
I've tried so far without success:
- Adding a CSS id to the input tag and modifying the template stylesheets to reproduce the button styles (I've realized this won't be an effective option for reasons difficult to explain here).
- Using vanilla Rails Form Helpers instead of the simple_form ones (renders input tag elements as well).
The only solution so far has been to create directly an HTML button element (as below) and binding it to an onClick JS event that triggers an Ajax request that submits the form via JS:
<%= simple_form_for @waiter do |f| %>
<%= f.input_field :email %>
<button id="my-button">My button</button>
<% end %>
The present solution doesn't seem to be very elegant. Could anyone advice on a better solution? Is it possible to produce button elements through Rails helpers?