在Rails中切換窗體中的一組輸入

我在Rails應用程序中使用邀請代碼和一組信用卡信息來創建表單。我希望能夠在同一頁面上切換兩者。用戶可以提供邀請碼或他們輸入信用卡信息。如果一個或另一個可以在不活動時隱藏（但不是必需的），那將會很好。下面是表格的相關位：在Rails中切換窗體中的一組輸入

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

什麼是最簡單的方法去做這件事？

來源

2012-10-25 cmhobbs

請注意，除了表單之外，應用程序並不在乎提供了哪個輸入。無論是否使用其中一個，都很高興。 – cmhobbs

爲什麼不把它們放在標籤中？就像這樣：http://twitter.github.com/bootstrap/components.html#navs –

你知道用戶在進入時會做什麼嗎？（它是否在鏈接中？）否則 - 你想如何觸發「隱藏」？ – froderik

開始與添加CSS ID或類的不同字段設置

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

使用名爲隱藏

.hidden { 
    display:none; 
}

CSS類並將其添加爲默認的邀請字段集

%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-29 10:00:44 froderik

在Rails中切換窗體中的一組輸入

回答

相關問題