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'

이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 당신의 다른 필드에 CSS ID 또는 클래스를 추가로

출처

2012-10-25 cmhobbs

양식을 넘어 앱은 제공되는 입력을 신경 쓰지 않습니다. 하나 또는 다른 것과 함께 또는 함께 굴러 다니는 것이 행복합니다. – cmhobbs

왜 탭에 넣지 않으시겠습니까? 다음과 같은 내용이 있습니다. http://twitter.github.com/bootstrap/components.html#navs –

사용자가 입력 할 때 무엇을해야하는지 알고 있습니까? (어떻게 든 링크에 있습니까?) 그렇지 않으면 - 어떻게 "숨기기"가 실행되기를 원합니 까? – froderik

시작

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

가

%fieldset#invite.hidden

FIELDSET 초대

.hidden { 
    display:none; 
}

숨겨진라는 CSS 클래스를 사용하여 기본적으로 추가 설정

다음에 "초대장이 있습니까?"

%a{ :class => "have_invite" }

링크

다음이 선

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

과 함께 일부 JQuery와 당신이 좀 더 멋진 당신이 jquerys 변색을보고 시작과 방법을 애니메이션 할 수 있습니다합니다.

출처

2012-10-29 10:00:44 froderik

Rails의 양식에 입력 집합 토글

답변

관련 문제