Question

I have a form in a Rails application with an invite code and a block of credit card information. I’d like to be able to toggle between the two on the same page. Either the user provides an invite code or they input credit card information. It would be nice if a one or the other could be hidden when inactive (but not necessary). Here’s the relevant bits of the form:

  %hr

  %fieldset
    .control-group
      = label_tag :invite_code, nil, :class => "control-label"

      .controls
        = text_field_tag :invite_code

    .control-group
      .controls
        = f.hidden_field :stripe_token
        = f.hidden_field :last_4_digits

    - if @user.last_4_digits
      .control-group
        = label_tag :card, nil, :class => "control-label"
        .controls
          Using card ending with #{@user.last_4_digits}
          = link_to "(change)", "#"

  %hr

  %fieldset
    %noscript
      %p
        This form requires Javascript to use

    .control-group#credit-card{ :style => @user.last_4_digits ? "display:none" : "display:block" }
      #credit-card-errors{:style => "display:none"}
        #stripe-error-message.alert-message.block-message.error

      .control-group
        = label_tag :credit_card_number, nil, :class => "control-label"
        .controls= text_field_tag :credit_card_number, params[:credit_card_number], :class => "field", :disabled => true 

      .control-group
        = label_tag :cvv, "Security code (CVV)", :class => "control-label"
        .controls= text_field_tag :cvv, params[:cvv], :class => "small", :disabled => true 

      .control-group
        = label_tag :expiry_date, nil, :class => "control-label"
        .controls= date_select "", :expiry_date, {:discard_day => true, :order => [:month, :year], :use_month_numbers => true, :start_year => Date.today.year, :end_year => Date.today.year + 25, :disabled => true}, {:class => "input-small"}

      /empty
      %p
        Subscriptions will be billed $12 annually.

  %fieldset.form-submit
    = submit_tag 'Sign up', :class => 'btn btn-large btn-primary'

What is the sanest way to go about doing this?

Answer 1

Start with adding CSS ids or classes to your different field sets

%fieldset#card
...
%fieldset#invite
...

use a CSS class called hidden

.hidden {
  display:none;
}

and add it as default on the invite fieldset

%fieldset#invite.hidden

then add your “have an invite?” link

%a{ :class => "have_invite" }

then some jquery along these lines

var show_invite_form = function(){
    $("#invite").removeClass("hidden");
    $("#card").addClass("hidden");
};
$(".have_invite").click(show_invite_form);

And if you want it a bit more fancy you can start looking at jquerys fade and animate methods.