title: Disable Bootstrap Button on click in Rails using haml
body: <p>I'm working with a very large Ruby on Rails app, so I won't be able to include much of the source code. If I miss anything needed for the solution, please let me know, and I'll see if I can find it.</p>
  
  <p>The part of the app I'm working on is the sign up page. We're using haml for the view, and bootstrap for styling. Here's the view code that's in a <code>_form.html.haml</code> partial:</p>
  
  <pre><code>= simple_form_for(resource, :as =&gt; resource_name,:class=&gt;"", :url =&gt; registration_path(resource_name)) do |f|
    .row-fluid
      = f.input :email, :as =&gt; :string, :input_html =&gt; { :class =&gt; 'span12', :type =&gt; 'email', :required =&gt; 'required' }
    .row-fluid
      .span6
        .input-append{ "data-role" =&gt; "acknowledge-input" }
          = f.input :firstname, :as =&gt; :string, :label =&gt; 'First Name', :input_html =&gt; { :class =&gt; 'span12', :type =&gt; 'text', :required =&gt; 'required', :placeholder =&gt; "Letters Only Please" }
      .span6
        = f.input :lastname, :as =&gt; :string, :label =&gt; 'Last Name', :input_html =&gt; { :class =&gt; 'span12', :type =&gt; 'text', :required =&gt; 'required', :placeholder =&gt; "Letters Only Please" }
    .row-fluid
      .span6
        = f.input :password, :as =&gt; :password, :input_html =&gt; { :class =&gt; 'span12', :type =&gt; 'password', :required =&gt; 'required' }
      .span6
        = f.input :password_confirmation, :as =&gt; :password, :input_html =&gt; { :class =&gt; 'span12', :type =&gt; 'password', :required =&gt; 'required' }
    .row-fluid
      .span7
        %small
          = link_to 'Already a Member?', new_user_session_path
      .span5
        = f.submit "Sign up", :class=&gt;"btn btn-success btn-block"
  </code></pre>
  
  <p>I've got it set up (through bootstrap) so that it will outline each text box in red if the conditions for that particular variable are not met, and at the bottom of the page is a Sign Up button. The main problem we're having is that if you madly click on the Sign Up button, the system will happily create several copies of the user in the database. Ideally, the Sign Up button should disable itself after the first click (until the page is refreshed). I know there's a <code>disabled</code> option provided by Bootstrap, but I'm not sure how to trigger that only after the button has been clicked once.</p>
  
  <p>As a corollary, I'd really like it if the button was actually disabled until all the front-end validation was done. But that's a bonus, not the main issue. ^_^</p>
  
  <h2>EDIT</h2>
  
  <p>As @rlecaro2 mentioned below I would really prefer something to happen when I click the button. As an initial attempt, I've added the following code:</p>
  
  <pre><code>- if submit_clicked?
    = f.submit "Sign up", :class=&gt;"btn btn-success btn-block", :disabled =&gt; 'disabled'
  - else
    = f.submit "Sign up", :class=&gt;"btn btn-success btn-block", :onclick =&gt; "click_submit"
  </code></pre>
  
  <p>The two method are Ruby methods I've put in application_helper.rb:</p>
  
  <pre><code>def click_submit
    @submit_clicked = true
  end
  
  def submit_clicked?
    @submit_clicked
  end
  </code></pre>
  
  <p>Unfortunately, this doesn't seem to work at all. I can click the button multiple times still. I suspect it has something to do with <code>onclick</code> wanting a JavaScript method. How do I have a separate Ruby method run when I click the button? It has to happen <strong>before</strong> the form is sent, because the whole point of this is that I only want the form to be sent <strong>once</strong>.</p>