Django-crispy-formsのnext-tabとprevious-tabボタン

Question

Django-crispy-formsを試してみましたが、本当に好きです。フォームを作成しました。これは4つのタブに分かれています。

ここで、タブ間をナビゲートするために、次のタブと前のタブのボタンを追加したいと思います.Django-crispy-formsでそれを行う方法を教えてください。

ありがとうございました！

Answer 1

私は解決策を見つけました。私はそれが良いものだとは思わないので、見てみて自由に別の方法を提案してください。ありがとうございました ！

HTMLテンプレートで

class ProfileForm(forms.ModelForm): 
    helper = FormHelper() 
    helper.form_tag = False 
    helper.layout = Layout(
     TabHolder(
      Tab(
       '1. Personal Information', 
       'first_name', 'last_name', 'address', 'city', 'zip_code', 'state', 'email', 'phone_number', 
       'how_did_you_hear_about_us', Button('Next', 'Next', css_class="btnNext") 
      ), 
      Tab(
       '2. Education Background', 
       'the_highest_qualification', 'school_graduated', 'year_of_graduation', 
       Button('Previous', 'Previous', css_class="btnPrevious"), Button('Next', 'Next', css_class="btnNext") 
      ), 
      Tab(
       '3. Work Experience', 
       'job_title', 'company', 'location', 'from_time', 'to_time', 'resume', 
       Button('Previous', 'Previous', css_class="btnPrevious"), Button('Next', 'Next', css_class="btnNext") 
      ), 
      Tab(
       '4. Application Question', 'are_you_18_years_of_age_or_older', 
       'are_you_eligible_to_work_in_US', 
       Button('Previous', 'Previous', css_class="btnPrevious"), Button('Next', 'Next', css_class="btnNext") 
      ), 
      Tab(
       '5. Account',    
       'password1', 'password2', 
       Button('Previous', 'Previous', css_class="btnPrevious"), 
       StrictButton('Register', css_class='btn-primary', type='submit'), 
      ) 
     ) 
    ) 

、これを置く：

<script> 
     $('.btnNext').click(function(){ 
     $('.nav-tabs > .active').next('li').find('a').trigger('click'); 
    }); 

     $('.btnPrevious').click(function(){ 
     $('.nav-tabs > .active').prev('li').find('a').trigger('click'); 
    }); 
    </script>