How can I submit the form when a dropdown item is clicked? What should the `action` URL be? After submission, I want to update the movie's watchlist in the frontend accordingly. How can I achieve this?

<div> containing form:-
I will make all anchor tags in the form into the options of a single radio.

<div class="font-sans-serif btn-reveal-trigger position-static ">
            <button class="list-change-button btn btn-sm dropdown-caret-none transition-none btn-reveal fs--2"
                type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true"
                aria-expanded="false" data-bs-reference="parent">
                <svg class="" width="2rem" height="2rem" viewBox="0 0 24 24" fill="none"
                    <path d="M12.0049 16.005L12.0049 15.995" stroke="#323232" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" />
                    <path d="M12.0049 12.005L12.0049 11.995" stroke="#323232" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" />
                    <path d="M12.0049 8.005L12.0049 7.995" stroke="#323232" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" />
                        d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
                        stroke="#323232" stroke-width="2" />
            <form action="/" method="post">
                <div class="dropdown-menu dropdown-menu-end py-2" style="">
                    <a class="dropdown-item" href="#">Currently Watching</a>
                    <a class="dropdown-item" href="#">On Hold</a>
                    <a class="dropdown-item" href="#">Plan to Watch</a>
                    <a class="dropdown-item" href="#">Completed</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item text-danger" href="#!">Remove from Watchlist</a>

class Watchlist(models.Model):
    list_name = models.CharField(max_length=20)

    def __str__(self):
        return self.list_name

class Movie(models.Model):
    title = models.CharField(max_length=255)
    release_year = models.PositiveIntegerField(validators=[
    duration_in_min = models.PositiveSmallIntegerField()
    imdb_rating = models.DecimalField(max_digits=2, decimal_places=1)
    rotten_tomatoes_score = models.PositiveSmallIntegerField(validators=[
    cover_img = models.ImageField(upload_to="cover_images")
    tags = models.ManyToManyField(Tag)
    watchlist = models.ForeignKey(Watchlist, on_delete=models.SET_NULL, null=True, blank=True, related_name="movies")

    def __str__(self):
        return self.title

def index(req):
    movies = Movie.objects.all()
    return render(req, "movies/index.html", {
        "movies_currently_watching": movies.filter(watchlist=Watchlist.objects.get(list_name="currently_watching")),
        "movies_on_hold": movies.filter(watchlist=Watchlist.objects.get(list_name="on_hold")),
        "movies_plan_to_watch": movies.filter(watchlist=Watchlist.objects.get(list_name="plan_to_watch")),
        "movies_completed": movies.filter(watchlist=Watchlist.objects.get(list_name="completed")),


Can you do something about it? Please help.

Please do not flag any individual with a request for specific assistance. Those of us answering questions here are all volunteers answering questions as time and knowledge permits.

Don’t use anchor elements, use submit buttons…

<form method="post" action="/">
<input type="hidden" name="film" value="{{ }}">
<menu class="dropdown-menu dropdown-menu-end py-2" style="">
    <li><button type="submit" name="action" value="currently_watching" class="dropdown-item" href="#">Currently Watching</button></li>
    <li><button type="submit" name="action" value="on_hold" class="dropdown-item" href="#">On Hold</button></li>
    <li><button type="submit" name="action" value="plan_to_watch" class="dropdown-item" href="#">Plan to Watch</button></li>
    <li><button type="submit" name="action" value="completed" class="dropdown-item" href="#">Completed</button></li>
    <li><button type="submit" name="action" value="remove" class="dropdown-item text-danger" href="#!">Remove from Watchlist</button></li>

… and a little javascript to make it behave better…

document.addEventListener('click', function(e){
    if('.dropdown-menu') && === 'button'){
        var form = target.closest('form');
        var form_data = new FormData(form);
        form_data.append(, target.value);
                method: 'post',
                body: form_data,
        ).then(function(response) {
            return response.json();
        .then(function(json) {
            // do stuff here
}, false);

Good thing with the above is you have one event listener for all “dropdown forms” on your page. Given the Javascript bloat we find on so many pages nowadays, I thought I’d mention that…

haven’t tested, but hopefully gives you ideas…

PS: <button type="submit"></button> has been around since 1994-ish to submit forms… look it up. :slight_smile: