Add watchlist to product page

Question

By clicking the Add button, the user should be able to add the product to the watch list. After this, the button should be changed to Remo, and by pressing it, the product will be removed from the list. There should be a link title at the top of the page and click on those products that are in the watch list to be displayed. However, these codes do nothing. Why??

forms & models.py:

#forms.py
class AddWatchlist(forms.Form):
    product_id = forms.IntegerField(widget=forms.HiddenInput())


#models.py(Related parts)
class Product(models.Model):
    title = models.CharField(max_length=64)

views.py:

def product_detail(request, product_id):
    product = get_object_or_404(Product, pk=product_id)
    comments = Comment.objects.filter(product=product)
    offers = PriceOffer.objects.filter(product=product).order_by('-offer_price')
    off_list = [float(product.first_bid)]
    maximum = float(product.first_bid)
    if request.method == 'POST':
        # comment
        # offer
        
    off = maximum
    context = {
        'product': product,
        'comments': comments, 
        'offers': offers,
        'off' : off
        }

    return render(request, 'auctions/product_detail.html', context)

def watchlist(request):
    products = request.user.watchlist.all()
    return render(request, 'auctions/watchlist.html', {'products': products})

def add(request):
    if request.method == 'POST':
        form = AddWatchlist(request.POST)
        if form.is_valid():
            product_id = form.cleaned_data['product_id']
            product = Product.objects.get(id=product_id)
            request.user.watchlist.add(product)
            return redirect('product_detail')
   else:
       form = AddWatchlist()

   return render(request, 'auctions/add.html', {'form': form})

def remove(request, product_id):
    product = Product.objects.get(id=product_id)
    request.user.watchlist.remove(product)
    return redirect('watchlist')

urls.py:

path("product_detail/<int:product_id>/", views.product_detail, name="product_detail"),
path('add', views.add, name='add'),
path('remove/<int:product_id>/', views.remove, name='remove'),
path('watchlist', views.watchlist, name='watchlist'),

product_detail.html(Related parts):

{% for product in products %}
    {{ product.name }}
    {% if product in request.user.watchlist.all %}
        <form action="{% url 'remove' product.id %}" method="post">
            {% csrf_token %}
            <button type="submit">Remove</button>
        </form>
    {% else %}
        <form action="{% url 'add' %}" method="post">
            {% csrf_token %}
            <input type="hidden" name="product_id" value="{{ product.id }}">
            <button type="submit">Add</button>
        </form>
    {% endif %}

{% endfor %}

add.html:

{% extends "auctions/layout.html" %}
{% block body %}

    <form action="{% url 'add' %}" method="post">
        {% csrf_token %}
        {{ form }}
        <button type="submit">Add to Watchlist</button>
    </form>

{% endblock %}

watchlist.html:

{% extends "auctions/layout.html" %}
{% block body %}

    {% if products %}
        {% for product in products %}
            {{ product.name }}
            <form action="{% url 'remove' product.id %}" method="post">
                {% csrf_token %}
                <button type="submit">Remove</button>
            </form>
        {% endfor %}
    {% else %}
        <p>No products in watchlist</p>
    {% endif %}

{% endblock %}

Answer 1

If nothing goes wrong when you click the button, have you perhaps forgotten to save the form?

form.save()