如何防止表单提交按钮在Rails的页面重新加载/刷新中禁用自身？

Question

I've got a Rails app and a form is built into my Sales Opportunity show page to update Sale Qualifiers (basically pre-loaded questions that the user has to answer). I'm using AJAX to submit the entry from the form, creating the new SaleQualifier and returning a partial to the page which shows the subsequent question for the user to answer. All this works fine.

Accidentally I reloaded the Sales Opportunity page without submitting anything to the form. The rest of the content loaded fine, but the submit button mysteriously disabled itself. If I click to another action and then back to the Sales Opportunities show action then the button works fine again. The button is normally set to disable_with 'Submitting...' to let the user know that the request is being processed, but the button still shows the normal 'Submit' when disabled on page reload, so I don't think that's the cause.

The Sales Opportunities show controller:

  def show
   @sales_opportunity = SalesOpportunity.includes(:company, :user, :timeline_events, :sale_contacts, :swots, :sale_competitors).find(params[:id])
   session[:sales_opportunity_id] = @sales_opportunity.id
   @sale_qualifier = SaleQualifier.new(sales_opportunity_id: params[@sales_opportunity.id])
     @answer = @sale_qualifier.build_answer
   @question = Question.find(@sales_opportunity.next_question)
unless @sales_opportunity.next_question == 1
     @prior_sale_qualifier = SaleQualifier.find_by(question_id: @sales_opportunity.prior_question)
   end
 end

The offending form:

<div class="panel panel-default">
  <%= form_for(@sale_qualifier, :html => {role: :form, 'data-model' => 'sale_qualifier'}, remote: true) do |f| %>
  <% if @sale_qualifier.errors.any? %>
   <div id="error_explanation">
    <h2><%= pluralize(@sale_qualifier.errors.count, "error") %> prohibited this answer from being saved:</h2>
    <ul>
    <% @sale_qualifier.errors.full_messages.each do |message| %>
      <li><%= message %></li>
    <% end %>
    </ul>
   </div>
  <% end %>
  <div class="panel-body">
   <div class="col-sm-6">
    <h2><%= @question.question_text %></h2>
    <% unless @question.id == 1 %>
      <p><%= link_to('Back', edit_sale_qualifier_path(@prior_sale_qualifier), data: { disable_with: "Loading..." }, :remote => true) %></p>
    <% end %>
   </div>
    <div class="col-sm-6">
     <div class="form-group">
      <%= f.hidden_field :sales_opportunity_id, :value => @sales_opportunity.id %>
     </div>
     <div class="form-group">
      <%= f.hidden_field :question_id, :value => @question.id %>
     </div>
      <% unless @question.id == 1 %>
      <div class="form-group">
        <%= f.hidden_field :prior_question_id, :value => @prior_question_id %>
      </div>
      <% end %>
      <%= f.fields_for :answer do |answer| %>
       <% if @question.answer_type == 'Text Field' %>
        <%= answer.text_area :answer_text, :placeholder => "Enter your answer" %>
      <% end %>
      <% if @question.answer_type == 'Datetime' %>
      <div class='input-group date' id='datetimepicker' data-date-format="YY.MM.DD">
        <%= answer.text_field :answer_text, class: "form-control", data: { date_format: 'YYYY/MM/DD' }, :placeholder => "YYYY/MM/DD" %>
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
         </span>
      </div>
        <% end %>
        <% if @question.answer_type == 'Boolean' %>
          <%= answer.select :answer_text, [['Yes', true], ['No', false]] %>
        <% end %>
        <% if @question.answer_type == 'Update' || @question.answer_type == 'Result' %>
          <%= answer.hidden_field :answer_text, :value => "Updated" %>
        <% end %>
      <% end %>
       <% if @question.answer_type == 'Update' || @question.answer_type == 'Result' %>
        <div class="actions">
          <%= f.submit "Done", class: "btn btn-large btn-success", data: { disable_with: "Submitting..." } %>
        </div>
       <% else %>
        <div class="actions">
          <%= f.submit "Submit", class: "btn btn-large btn-success", data: { disable_with: "Submitting..." } %>
        </div>
       <% end %>
      <% end %>
     </div>
   </div>
</div>

Any idea what's causing this bug and how I can squash it?

Answer 1

So, apparently this is a bug/feature in Firefox, where it remembers page input values across refreshes (why would it do this?). In any case the way to remove it is to turn off autocomplete:

<%= f.submit "Submit", class: "btn btn-large btn-success", data: { disable_with: "Submitting..." }, autocomplete: 'off' %>

Which sorts the problem out.