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?

Using Django Forms & APIs
1

<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"
                    xmlns="http://www.w3.org/2000/svg">
                    <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" />
                    <path
                        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" />
                </svg>
            </button>
            <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>
                </div>
            </form>
        </div>

models.py:-

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=[
        MinValueValidator(1900),
        MaxValueValidator(2100),
    ])
    duration_in_min = models.PositiveSmallIntegerField()
    imdb_rating = models.DecimalField(max_digits=2, decimal_places=1)
    rotten_tomatoes_score = models.PositiveSmallIntegerField(validators=[
        MinValueValidator(1),
        MaxValueValidator(100)
    ])
    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

views.py:-

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")),
    })

page:-

image
image1920×1080 147 KB

2

@KenWhitesell
Can you do something about it? Please help.

3

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.

4

Don’t use anchor elements, use submit buttons…

<form method="post" action="/">
<input type="hidden" name="film" value="{{ film.pk }}">
<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>
</menu>
</form>

… and a little javascript to make it behave better…

document.addEventListener('click', function(e){
    if(e.target.closest('.dropdown-menu') && e.target.nodeName.toLowerCase() === 'button'){
        e.preventDefault();
        var form = target.closest('form');
        var form_data = new FormData(form);
        form_data.append(target.name, target.value);
        fetch(
            form.action,
            {
                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: