Bootstrap with Ruby on Rails form submit button not working

Question

Each form independantly works. However when I add them together, the first form's submit button doesn't work. It is just completely static. When I click it nothing happens/activates. Why is this the case? What am I missing here?

I've tried to look for missing closing tags but I am an amateur when it comes to Bootstrap. Possibly my layout is making it fail?

<%= form_for [:backend, :cms, @landing_page], html: { multipart: true } do |f| %>

    <%= render 'backend/shared/form_errors', model: @landing_page %>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Create a landing page</h3>
        </div>
        <div class="panel-body">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#headers" data-toggle="tab">Headers/Titles</a></li>
                <li><a href="#ebook" data-toggle="tab">Theme Ebook</a</li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="headers">
                    <div class="row">
                        <div class="col-md-6" style="margin-top: 10px;">
                            <div class="form-group">
                                <%= f.label :internal_name %>
                                <%= f.text_field :internal_name, required: true, class: "form-control"%>
                            </div>
                            <div class="form-group">
                                <%= f.label :h1 %>
                                <%= f.text_field :header, required: true, class: "form-control" %>
                            </div>
                            <div class="form-group">
                                <%= f.label :sub_header %>
                                <%= f.text_field :sub_header, required: true, class: "form-control"%>
                            </div>
                            <div class="form-group">
                                <%= f.label :meta_title %>
                                <%= f.text_area :meta_title, required: true, class: "form-control js-counter", data: { target: '.js-counter-target1'}, maxlength: 160 %>
                                <small><span class="js-counter-target1"></span> / 160 Characters</small>
                            </div>
                            <div class="form-group">
                                <%= f.label :meta_description %>
                                <%= f.text_area :meta_description, required: true, class: "form-control js-counter", data: { target: '.js-counter-target2'}, maxlength: 200 %>
                                <small><span class="js-counter-target2"></span> / 160 Characters</small>
                            </div>
                            <div class="actions">
                                <%= f.submit "Save", class: "btn btn-primary", data: { disable_with: 'Please Wait…' } %>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="ebook">
                    <div class="row">
                        <div class="col-md-6">
                             <div class="form-group" style="margin-top: 20px; margin-right: 20px;">
                                 <div class="switch" data-display="input_status">
                                     <%= f.label :show_image %>
                                     <%= f.check_box :show_image, class: "bootstrap-switch" %>
                                     <i class="fas fa-circle-notch fa-spin"></i>
                                 </div>
                             </div>
                            <div class="form-group">
                                <%= f.label :ebook_header %>
                                <%= f.text_field :theme_header, required: true, class: "form-control" %>
                            </div>
                            <div class="form_group">
                                <%= f.label :ebook_image %>
                                <%= f.select :theme_image, options_for_select([['Theme1', 1], ['Theme2', 2]], selected: @landing_page.theme_image), {}, required: true, class: "form-control" %>
                            </div>
                            <div class="form-group" style="margin-top: 10px;">
                                <%= f.label :ebook_checklist %>
                                <%= f.text_area :theme_checklist, required: true, class: "form-control", rows: 5 %>
                                <small>As this will be a checklist, write each statement on a new line.</small>
                            </div>
                            <div class="actions">
                                <%= f.submit "Save", class: "btn btn-primary", data: { disable_with: 'Please Wait…' } %>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<% end %>

Check this: https://stackoverflow.com/questions/547821/two-submit-buttons-in-one-form — Calvin, Jun 21 '18 at 10:18

score 0 · Answer 1 · answered Jun 21 '18 at 09:10

If you want to use different actions handlers for same form you shouldn't use submit tag.

Instead of submit you should use button tag.

For example:

= button_to( "First Action", action: "first_action", controller: "your_controller")

and

= button_to( "Second Action", action: "second_action", controller: "your_controller")

And at controller:

class YourController < SmthController
  def first_action
    ...
  end

  def second_action
    ...
  end
end

score 0 · Answer 2 · answered Jun 22 '18 at 03:47

Your submit can work perfectly with bootstrap class since bootstrap was install. Make sure that you had add bootstrap to your Gemfile:

gem 'bootstrap', '~> 4.1.1'

Run bundle install

Ensure that sprockets-rails is at least v2.3.2.

Import Bootstrap styles in app/assets/stylesheets/application.scss:

@import "bootstrap";

Restart your server and see if it works.

Bootstrap with Ruby on Rails form submit button not working

2 Answers2