Question

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

现在，我想添加next-tab和previous-tab按钮在tab之间导航，你能告诉我如何用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>

Django-crispy-forms中的next-tab和previous-tab按钮

1 个答案: