Django-crispy-forms 中的下一个选项卡和上一个选项卡按钮答案

【问题标题】：next-tab and previous-tab buttons in Django-crispy-formsDjango-crispy-forms 中的下一个选项卡和上一个选项卡按钮
【发布时间】：2016-08-12 00:30:56
【问题描述】：

我尝试过 Django-crispy-forms 并且非常喜欢它，我创建了一个表单，它分为 4 个选项卡（由于字段太多）。

现在，我想添加下一个选项卡和上一个选项卡按钮来在选项卡之间导航，你能告诉我如何使用 Django-crispy-forms 来做到这一点吗？

谢谢！

【问题讨论】：

标签： python django django-crispy-forms

【解决方案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>

【讨论】：