MultiValueDictKey Error

Hi!

I’m getting MultiValueDictKey Error at/collect
with the word ‘idee’

Here are my files. I mainly want to know what I need to write under 'collect" in views.py. (I’m having trouble with the word ‘idee’ there. ‘Idee’ is what I wrote in models.py. I don’t know what else to write there) That’s where I’m getting the error.

If you could give some guidance, that would be so helpful. Thank you!

urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index),
    path('bibliography', views.bibliography),
    path('collect', views.collect),
    path('lookup', views.lookup),
]

views.py

from django.shortcuts import render, redirect
from .models import Bibliography

def index(request):
    return render(request, "index.html")

def bibliography(request):
    context={
        'biblis' : Bibliography.objects.all
    }
    return render(request, "Bibliography.html", context)

def collect(request):
    print(request.POST)
    Bibliography.objects.create(idee=request.POST['idee'], title=request.POST['title'], author=request.POST['author'], isbn=request.POST['isbn'], summary=request.POST['summary'])
    return redirect('/lookup')

def lookup(request):
    print(request.POST)
    context = {
        'biblis' : Bibliography.objects.all
    }
    # some_summary = Summary.objects.get(id=request.POST)
    # some_author = Author.objects.get(id=request.POST)
    return render(request, "lookup.html", context)

models.py

from django.db import models

class Bibliography(models.Model):
    idee = models.CharField(max_length = 50)
    title = models.CharField(max_length = 50)
    author = models.CharField(max_length = 50)
    isbn = models.IntegerField(max_length = 15)
    summary = models.CharField(max_length = 255)

bibliography.html

<!DOCTYPE html>
<html lang="en">
<head>
  {% load static %}
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Cover Page</title>
    <!-- Bootstrap css -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
  <style>
    .flex-container {
         display: flex;
      }
      .flex-child {
        flex: 1;
      }
      .flex-child:first-child {
        margin-right: 20px;
      }
      .mybox1 {
        width: 700px;
        padding: 10px;
        margin-left: 260px;
      }
      .bibliography_bar {
        display: block;
        background-color: lightgrey;
        min-height: 70px;
      }
      h1 {
        margin-left: 45px;
        margin-top: 20px;
        margin-bottom: 10px;
      }
  </style>
  </head>
<body>
  <div class="bibliography_bar"></div>
  <h1>Bibliography Page</h1>
  <!-- flexbox starts -->
  <div class="flex-container">
    <div class="row">
      <div class="col flex-child">
        <div class="mybox1">
  <!-- form for summary -->
  <form action="/collect" method="post">
    {% csrf_token %}
    <div class="mb-3">
      <label for="exampleFormControlInput1" class="form-label">ID</label>
      <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="First Name & Last Name">
    </div>
    <div class="mb-3">
      <label for="exampleFormControlInput1" class="form-label">Book Title</label>
      <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Book Title">
    </div>
    <div class="mb-3">
      <label for="exampleFormControlInput1" class="form-label">Author</label>
      <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Author">
    </div>
    <div class="mb-3">
      <label for="exampleFormControlInput1" class="form-label">ISBN-13</label>
      <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="ISBN-13">
    </div>
    <div class="mb-3">
      <label for="exampleFormControlTextarea1" class="form-label">Summary</label>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>
    <input type="submit" value="Submit">
</form>
<!-- flexbox ends -->
        </div>
      </div>
    </div>
  </div>


    
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
</body>
</html>

It looks like you copied and pasted some bootstrap code and didn’t modify it for your needs.

So everything here is undefined causing your error:

Maybe this will help you out:
https://www.w3schools.com/tags/att_form_name.asp

Thank you! But I still don’t quite understand which part of that code above is undefined.

idee, title, author, isbn, summary are all undefined. Your HTML form is not sending this information. You need to customize your form to send the info you want it to send.

Thank you for your response. Could you give an example so I can know how to define it?

Check out the example in the link I posted above.

“The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.”

The key thing here is using a name attribute so you can “reference form data after a form is submitted”.

Also, from copy and pasting you have multiple labels for the same input, and multiple inputs with the same id.