[Fixed]-Next-tab and previous-tab buttons in Django-crispy-forms

by

1👍

I found the solution , I don’t think it’s a good one so please take a look and feel free to suggest another way. Thank you !

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

In the HTML template, put this: 

 <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>
👤Huy Than

Leave a comment