0

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.

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 _form.html.haml partial:

= simple_form_for(resource, :as => resource_name,:class=>"", :url => registration_path(resource_name)) do |f|
  .row-fluid
    = f.input :email, :as => :string, :input_html => { :class => 'span12', :type => 'email', :required => 'required' }
  .row-fluid
    .span6
      .input-append{ "data-role" => "acknowledge-input" }
        = f.input :firstname, :as => :string, :label => 'First Name', :input_html => { :class => 'span12', :type => 'text', :required => 'required', :placeholder => "Letters Only Please" }
    .span6
      = f.input :lastname, :as => :string, :label => 'Last Name', :input_html => { :class => 'span12', :type => 'text', :required => 'required', :placeholder => "Letters Only Please" }
  .row-fluid
    .span6
      = f.input :password, :as => :password, :input_html => { :class => 'span12', :type => 'password', :required => 'required' }
    .span6
      = f.input :password_confirmation, :as => :password, :input_html => { :class => 'span12', :type => 'password', :required => 'required' }
  .row-fluid
    .span7
      %small
        = link_to 'Already a Member?', new_user_session_path
    .span5
      = f.submit "Sign up", :class=>"btn btn-success btn-block"

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 disabled option provided by Bootstrap, but I'm not sure how to trigger that only after the button has been clicked once.

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. ^_^

EDIT

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:

- if submit_clicked?
  = f.submit "Sign up", :class=>"btn btn-success btn-block", :disabled => 'disabled'
- else
  = f.submit "Sign up", :class=>"btn btn-success btn-block", :onclick => "click_submit"

The two method are Ruby methods I've put in application_helper.rb:

def click_submit
  @submit_clicked = true
end

def submit_clicked?
  @submit_clicked
end

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 onclick wanting a JavaScript method. How do I have a separate Ruby method run when I click the button? It has to happen before the form is sent, because the whole point of this is that I only want the form to be sent once.

Onikoroshi
  • 281
  • 4
  • 16
  • Just add an onClick event to it. If such event only disables it it won't enable again. -Responded as a comment because I'm lacking examples n' stuff. – rlecaro2 Jan 20 '14 at 20:35
  • Great! Um, how do I do that? I'm sorry, but I'm a bit new to this whole haml/bootstrap/js thing. Do I add something to the view haml code, or do I have to find a .js file to alter? – Onikoroshi Jan 20 '14 at 20:42

1 Answers1

-1

I'm guessing you use javascript for your front-end validations, in that case you could start up with the button disabled and enable it at the end of said validations.

Or better, don't display the button until you're ready to sign up, and make it disappear after clicked.

Both effects can be achieved using Jquery in a pretty straight-forward manner.

You should do this on the view's javascript file (under assets).

I'm out of time but check out this detailed answer.

GL & HF.

Community
  • 1
  • 1
rlecaro2
  • 755
  • 7
  • 14
  • Thank you so much for the advice! Honestly, I'm not sure how the front-end validation is working, since it's handled through Bootstrap, so I suspect it is JQuery. However, I don't know where that Bootstrap logic lives, so I'm not sure where to disable/enable the button. I found the answer you linked earlier, and though it does talk about buttons and such, it's not Rails. We don't use ` – Onikoroshi Jan 20 '14 at 21:44
  • Worry not! The css and js applies to the already loaded HTML, so you can inspect the page you're working on and use the html nodes you need. The helpers are just there to save you the work of writing all that hassle. About the javascript you can create a new file on your assets/js folder, as it's rails default to include all the tree. If you can't access the validation logic I don't really know how could you check the validation is ready. If you want to try out the javascript functions you can use, try out the live console most browser debuggers have incorporated. We'll guide you through this. – rlecaro2 Jan 20 '14 at 23:25