Handling Multiple Forms on the Same Page in Django

While I was developing a drawing game, I needed to create channels. I created two models Room and the Artist. The index page’s required to have multiple forms. One for hosting a room, and the other for joining to a room.

My two basic models:

class Room(models.Model):
    name = models.CharField(max_length=6) 
    artists = models.ManyToManyField('Artist')
    def __str__(self):
        return f'{self.name}'

class Artist(models.Model):
    nickname = models.CharField(max_length=30, default='')
    def __str__(self):
        return f'{self.nickname}'

and my forms:

class HostRoomForm(forms.ModelForm):
    class Meta:
        model = Artist
        fields = ['nickname', ]

class JoinRoomForm(forms.ModelForm):
    temp_room_code = forms.CharField(max_length=6, min_length=6)
    class Meta:
        model = Artist
        fields = ['nickname', 'temp_room_code', ]

and I just created two form tag for each form.

<form action="" method='POST' class="form-inline" style="margin: 8px;padding: 8px;">
    <div class="input-group mb-2 mr-sm-2">
        <div class="input-group-prepend">
            <div class="input-group-text">Nickname</div>
        </div>
        {% csrf_token %}
        {{ host_room_form.nickname }}

    </div>
    <button name="host_room" type="submit" class="btn btn-primary mb-2">Host Game</button>
</form>

<hr size="10">

<form action="" method='POST'>
    <div class="input-group" style="margin: 10px;">
        <div class="input-group-prepend"><span class="input-group-text">Nickname</span></div>
        {% csrf_token %}
        {{ join_room_form.nickname }}
    </div>

    <div class="input-group" style="margin: 10px;">
        <div class="input-group-prepend"><span class="input-group-text">Room Code</span></div>
        {% csrf_token %}
        {{ join_room_form.temp_room_code }}
    </div>
    <button name="join_room" type="submit" class="btn btn-primary mb-2" style="margin: 10px;">Join Game</button>

    {% for message in messages %}
    <p id="messages">{{ message }}</p>
    {% endfor %}
</form>

The last thing we should do here is to write my view and handle the post requests.

def index(request):
    host_room_form = HostRoomForm(request.POST or None)
    join_room_form = JoinRoomForm(request.POST or None)
    if request.method == 'POST':
        if 'host_room' in request.POST:
            if host_form.is_valid():
                room_code = get_random_string(length=6).upper()
                room = Room.objects.create(name=room_code)
                room.artists.add(artist)
                return render(request, 'room.html', context)

        elif 'join_room' in request.POST:
            if join_form.is_valid():
                artist = join_form.save(commit=False)
                room_code = join_form.cleaned_data \
                    .get('temp_room_code', 'temp code bulunamadi').upper()
                room = get_object_or_404(Room, name=room_code)
                return render(request, 'room.html', context)

    context = {'host_room_form': host_room_form,
               'join_room_form': join_room_form}
    return render(request, 'index.html', context)