Agfdhyk

I run into the following issue with my Django project: I have an profile edit page, where I want the user to be able to edit their profile information, which is seperated in tabs that they can navigate: Profile and Extended Information.
However, the page loads at the Profile tab, but when I navigate to the Extended Information tab, it just opens this tab below the Profile tab, and it doesn't 'replace' the first tab with the second. Consequently, I get a MultiValueDictKeyError error when I only change something in the Extended Information form under that tab. How do I fix the error with the tabs opening below each other? I suspect that my MultiValueDictKeyError also disappears then (but I'm not sure).

Html

{% extends "base.html" %}

{% load bootstrap3 %}



{% block content %}



<!-- Nav tabs -->

<div class="container profile">

    <div>

        <h1>Edit your details:</h1>

        <h3><strong><a href="{% url 'users:profile' %}">{{user.username}}</a></strong></h3>

    </div>

    <nav>

      <div class="nav nav-tabs" id="nav-tab" role="tablist">

        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Profile</a>

        <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Extended information</a>

      </div>

    </nav>

    <div class="tab-content" id="nav-tabContent">

      <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">

        <form method="post">

        {% csrf_token %}

        {% bootstrap_form basic_form %}

        <button name="basic_btn" class="btn btn-primary btn-sm" type="Submit" value="basic_form_value">Submit</button>

        </form>

      </div>

      <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">

        <form method="post">

        {% csrf_token %}

        {% bootstrap_form ext_form %}

        <button name="ext_btn" class="btn btn-primary btn-sm" type="Submit" value="ext_form_value">Submit</button>

        </form>

      </div>

</div>

Views.py

def edit_profile(request):



    # https://groups.google.com/forum/#!topic/django-users/T9Y67_Nx2qo

    basic_form = EditBasicProfileForm(request.POST, instance=request.user)

    ext_form = EditExtendedProfileForm(request.POST, instance=request.user)



    if request.method == 'POST':

        if request.POST['basic_btn'] == "basic_form_value":

            basic_form.save()

            messages.success(request, ('Your profile was successfully updated!'))

            return redirect('users/profile')

        elif request.POST['ext_btn'] == "ext_form_value":

            ext_form.save()

            messages.success(request, ('Your profile was successfully updated!'))

            return redirect('users/profile')



    else:

        basic_form = EditBasicProfileForm(instance=request.user)

        ext_form = EditExtendedProfileForm( instance=request.user)

        args = {'basic_form': basic_form,'ext_form': ext_form}

        return render(request,'users/edit_profile.html',args)

Forms.py

class EditBasicProfileForm(UserChangeForm):



    class Meta:

        model = User

        fields = ('first_name', 

                 'last_name',

                 'email',

                 'password'

                 )



class EditExtendedProfileForm(forms.ModelForm):

    class Meta:

        fields = ('description','location','fav_genre','fav_book')

        model = Profile



    def __init__(self, *args, **kwargs):

        super().__init__(*args,**kwargs)

        self.fields['description'].label = 'Write a little bit about yourself'

        self.fields['location'].label = 'Where do you live?'

        self.fields['fav_genre'].label = 'What is your favorite genre?'

        self.fields['fav_book'].label = 'What is your favorite book?'

Any help is greatly appreciated!