cs50 project3: django multivaluedictkeyerror

Question

I am working on CS50 Web Programming with Python and JavaScript Project 3.

I keep getting the multidictkeyerror everytime i tried to submit the form. It seems like the value just does not get submitted with the form during the POST request. I have tried to search the web for an explanation but to no avail. Appreciate if someone could assist me on this.

Here is the snapshot of the error code i keep getting:

Here is the snippet code in JavaScript:

            if (menu_category == "subs") {

                var subs_extra_selected = [];
                var subs_collection = ["Mushrooms", "Green Peppers", "Onions", "Cheese"];

                if (subx_array.length !=0) {
                    for (i=0; i<subx_array.length; i++) {
                        for (j=0; j<subs_collection.length; j++) {
                            if (subx_array[i].labels[0].innerHTML.search(subs_collection[j]) != -1) {
                                subs_extra_selected.push(subs_collection[j]);
                            }
                        }
                    }

                }

                // Hidden form fields to pass value
                modal_content.innerHTML += `
                    <input type="hidden" name="topping_name" id=topping_name" value="${subs_extra_selected}">
                `;                              

            }

Here is the code in python to handle the POST request:

@login_required
def order_request(request):
    if request.method == "POST":
        topping_name = request.POST["topping_name"]

    return HttpResponse("Your order is successful!")

Thanks!

Answer 1

There is a typo here:

modal_content.innerHTML += `
                    <input type="hidden" name="topping_name" id=topping_name" value="${subs_extra_selected}">
                `;  

More specifically,something is missing here:

id=topping_name"