Различать, какая кнопка была использована для отправки формы Django/JS

У меня есть Django представление формы, которая представляет пользователю два варианта. При отправке формы одна кнопка отправляет пользователя в одно представление, другая - в другое. Вот часть этого представления:

form = MenuItemForm(request.POST or None, request.FILES or None)
if request.method != 'POST':
    # No data submitted; create a blank form.
    form = MenuItemForm()
else:
    if 'add_ingredients' in request.POST:
        # POST data submitted; process data.
        if form.is_valid():
            menu_item = form.save(commit=False)
            menu_item.menu = menu_instance
            menu_item.save()
            return redirect('core:add_ingredient', menu_item_id=menu_item.id)
    else:
        # POST data submitted; process data.
        if form.is_valid():
            menu_item = form.save(commit=False)
            menu_item.menu = menu_instance
            menu_item.save()
            return redirect('core:edit_menu')

Это прекрасно работало само по себе. Вот форма и кнопки в шаблоне:

      <form id="form" class="form" method="post" action="{% url 'core:add_ingredient' menu_item.id %}">
                {% csrf_token %}
                {{ form.as_p }}
                <div class="button-container">
                    <button id="another-ingredient-button" type="submit" name="add_ingredient">Add Another Ingredient</button>
                    <button type="submit" name="substitute">Add Substitute</button>
                    <button class="done" type="submit" name="done">Done</button>
                </div>
            </form>

После того, как я добавил код ниже, форма все еще отправляется, но она не распознает, какая кнопка была нажата, чтобы отправить форму, и всегда отправляет меня к одному представлению, я думал о добавлении eventListener для каждой кнопки, но тогда мое окно предупреждения и другой код работает, даже когда форма не отправляется. Любая помощь будет оценена по достоинству!

const alertBox = document.getElementById('alert-box')
const anotherIngredientButton = document.getElementById('another-ingredient-button')
const form = document.getElementById('form')

let formSubmitted = false;

form.addEventListener('submit', (e) => {
   e.preventDefault()
   alertBox.style.display = 'block';
   console.log(form)

   setTimeout(() => {
    form.submit()
    alertBox.style.display = 'none'
    formSubmitted = true
}, 1000)

});

<button type="submit" name="button_type" value="add_ingredient">Add Another Ingredient</button>
<button type="submit" name="button_type" value="substitute">Substitute</button>
<button type="submit" name="button_type" value="done">Done</button>

if request.POST.get("button_type") == "add_ingredient":
    ...
elif request.POST.get("button_type") == "substitute":
    ...
elif request.POST.get("button_type") == "done":
    ...