CODEWITHSUNDEEP
cssruby-on-railsrubyformsruby-on-rails-5
heroxav
heroxav

Reputation: 1467

Rails: Embed child in submit_tag

I have this form:

= form_tag(path, name: "name") do |f|
   = hidden_field_tag "abc", content
   = submit_tag "" do
       %i.icon.ion-android-sync

As you can see, I am trying to put an Ionicon inside the Form Submit tag.
I've tried a bunch of ways, none of which worked.
With the given example I get an empty button with an approximate width of 3px.

Is it possible to embed a child in a submit_tag? If, how would you go about doing so?

Thanks a lot for each answer!

Upvotes: 2

Views: 741

Answers (2)

Cyril Duchon-Doris
Cyril Duchon-Doris

Reputation: 14039

No the Rails submit helper won't let you do that.

I use a custom submit helper in my app :

# Render a form submit button
# === Params
# +value+:: Value of the input/commit button, used for route constraints
# +text+:: Text for the button
# +:html_options+:: 
def submit(value=nil, text=nil, html_options={})
  text ||= 'Submit'
  html_options[:name] ||= 'commit'
  html_options[:type] = 'submit'
  html_options[:data] ||= {}
  html_options[:data][:disable_with] ||= 'Please wait'
  html_options[:autocomplete] = "off" # https://github.com/rails/jquery-ujs/issues/357
  content_tag(:div, class: 'form-submit-wrapper') do
    button_tag(html_options){ block_given? ? yield : text }
  end
end

You can just pass whatever HTML you want in a block (sorry this is ERB, I'm not really familiar with HAML) 

<%= submit do %>    
  <i class="icon ion-android-sync"></i>
<% end %>

The first two params are only helpful if you have several submit buttons for your form

<%= submit('preview_action', 'Preview result') do %>    
  <i class="icon ion-android-sync"></i>
<% end %>


<%= submit('really_do_action', 'Do it for real') do %>    
  <i class="icon ion-android-sync"></i>
<% end %>

Upvotes: 0

Michael Chaney
Michael Chaney

Reputation: 3041

The short answer is "no". However, you can make a button with type of "submit" that'll do the same thing and allow you to put content in it:

   %button{type: "submit"}
     %i.icon.ion-android-sync

Upvotes: 6

Related Questions