Следующая вкладка и кнопки предыдущей вкладки в Django-хрустящие формы

Question

Я пробовал Django-хрустящие формы и действительно люблю его, я создал форму, которая разбивается на 4 вкладки (из-за так много полей).

Теперь я хотел бы добавить кнопки следующей вкладки и предыдущей вкладки, чтобы перемещаться между вкладками, можете ли вы показать мне, как это сделать с Django-crispy-forms?

Спасибо!

Answer 1

Я нашел решение, я не думаю, что он хороший, поэтому, пожалуйста, взгляните и не стесняйтесь предлагать другой способ. Спасибо !

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'), 
      ) 
     ) 
    ) 

В шаблоне HTML, поставить это:

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