0

Rails アプリケーションに、招待コードとクレジット カード情報のブロックを含むフォームがあります。同じページで2つを切り替えることができるようにしたいと思います。ユーザーが招待コードを提供するか、クレジットカード情報を入力します。非アクティブなときにどちらか一方を非表示にできると便利です (必須ではありません)。フォームの関連部分は次のとおりです。

  %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'

これを行うための最も健全な方法は何ですか?

4

1 に答える 1

0

さまざまなフィールド セットに CSS ID またはクラスを追加することから始めます。

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

hidden という CSS クラスを使用する

.hidden {
  display:none;
}

招待フィールドセットのデフォルトとして追加します

%fieldset#invite.hidden

次に、「招待がありますか？」を追加します。リンク

%a{ :class => "have_invite" }

次に、これらの行に沿っていくつかのjquery

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

もう少し派手にしたい場合は、jquerys のフェードとアニメーションのメソッドを調べてみてください。

于 2012-10-29T10:00:44.597 に答える