Django-crispy-forms中的下一页签和上一页签按钮

Question

我已经尝试过Django-crispy-forms，我真的很喜欢它，我创建了一个表单，它被分成了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>