How to trigger a modal on submit button & redirect Rails

Question

I have a form and I want the submit button to submit the form and redirect but I want a modal to come up at the same time and make the user wait while the app does it's thing(takes about 35 seconds). How can I get the submit button to submit AND bring up the modal.

<%= form_for @tenant, url: wizard_path, method: :put, validate: true do |f| %>
    Blah...Blah...
  <div class="actions">
  <%= f.submit "Submit Report Information" data-toggle="modal" data-target="#pleaseWaitDialog" %>
  <!---Waiting Modal--->
    <div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false">
      <div class="modal-header">
          <h1>Processing...<small>May take up to 1 minute</small></h1>
      </div>
      <div class="modal-body">
          <div class="progress progress-striped active">
              <div class="bar" style="width: 100%;"></div>
          </div>
      </div>
     </div>
    </div>
<% end %>

Here is my controller although it is a (wicked gem) step controller, this is the last step in a form process.

class Tenants::ReportStepsController < ApplicationController
  include Wicked::Wizard
  before_filter :authenticate_tenant!


  steps :basic_info, :bill_input, :upsell_input, :report_pay, :bank_trans, :confirm_info

  def show
    @tenant = current_tenant
    @tenant.build_bill if @tenant.bill.blank?
    ...
    @tenant.build_upsell if @tenant.upsell.blank?
    ...
    end
    @tenant.build_transaction if @tenant.transaction.blank?
    render_wizard
  end

 def update
    ...
 end

private

  def finish_wizard_path
    @tenant = current_tenant
    @tenant.build_report if @tenant.report.blank?
    @tenant.build_api_aggregation if @tenant.api_aggregation.blank?
    @tenant.api_aggregation.save
    @tenant.report.save
    GetTransactionsWorker.perform_in(6.minutes, @tenant.id.to_s)
    TransAggregationWorker.perform_in(7.minutes, @tenant.id.to_s)
    <!---I assume calling the modal in the controller would happen here ---->
    tenants_dashboard_path
  end

Answer 1

For this we will add two div id in the CSS file.
One is the #content id and second is #loading .

div#content {
  display: none;
} 


div#loading {
 top: 200 px;
 margin: auto;
 position: absolute;
 z-index: 1000;
 width: 160px;
 height: 24px;
 background: url(loadingimage.gif) no-repeat;
 cursor: wait;
}

loadingimage.gif can be any image that display loading animation

Now add these div id into your html page as follow

<div id="loading"></div>
   <div id="content">your html content here......</div>

Now add the following javascript code into head section of your html page.

<script type="text/javascript">// <![CDATA[
     function preloader(){
         document.getElementById("loading").style.display = "none";
         document.getElementById("content").style.display = "block";
     }//preloader
     window.onload = preloader;
// ]]></script>

Answer 2

@supermeA You want to open modal popup when user click on submit button? then you want to do something and then submit that data to controller?