CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3
eblume
eblume

Reputation: 1820

Turn 'Remember Me' checkbox in to a submit

I currently am using Rails' "Devise" plugin to handle login/authentication. I am using a very basic form_for tag to handle the log-in form. Here is the code:

<div class="well-outer splash-signin-block">
  <div class="well-inner">
    <h2>Sign in</h2>
    <div>
      <%= form_for(resource, as: resource_name, url: user_session_path, html: {
        class: "form-inline"
      }) do |f| %>
        <p><%= f.text_field :email, placeholder: "Email", autofocus: true %></p>
        <p><%= f.password_field :password, placeholder: "Password" %></p>
        <p>
          <%= f.submit 'Sign in', class:"btn btn-primary btn-large" %>
          <%= f.check_box :remember_me, class: "checkbox" %>
          <%= f.label :remember_me %>
        </p>
      <% end %>
    </div>
  </div>
</div>

However, I would like to change that "Remember me" checkbox in to a button. The user experience would be that they could either click "Sign in" (the default action) or they could click "Remember me" to sign in persistently.

Behind the scenes, I imagine this would work by using a hidden field that sets the resource[remember_me] property to "1". However as a rails newbie I don't know how to go about coding this. I imagine it will need some javascript and that is fine, but googling has only turned up AJAX-y stuff and I don't think that's necessary. I won't shy away from it if it is necessary, though.

Upvotes: 2

Views: 1220

Answers (1)

Kenny Bania
Kenny Bania

Reputation: 637

You would create a button with some id, then use javascript to bind to the click event of that button. When the button is clicked, you want to change the value of a hidden field. If you were using jQuery, it would be something like...

   $('#id_of_button').click(function() {
     $('#id_of_hidden_field').val("true");
   });

Then you just check for that value in the controller like you normally would.

If you're not using jQuery it's not much more work, I just don't know it off the top of my head. Btw this code should be located in a .js file in your assets/javascript folder

Upvotes: 2

Related Questions