Django: Get value from html for-loop for views.py-CodePudding

I am stuck with getting the value from a for-loop of an html-page.

This is my setup: The user has an input field that uses a autocomplete function. This function uses the shop-Model in Django. After submitting, the product will be added to the Shopping_List-Model in Django. It will be displayed in another div of the page. This is currently working without a problem.

Every product is in one line of a table including a button to delete the product from the shopping list. The button as such is working. I tried to print out something when the button is clicked. But I am not able to get the value, meaning the product name, from the table row. It always returns none. With the value I would like to delete the product from the shopping list.

Any suggestions are much appreciated!

Here is my code:

HTML

<div>
<!--Input field and autocomplete-->
<form id="product_add" action="{% url 'shop' %}" method="post">
{% csrf_token %}
<input type="text" name="shop_product" id="shop_product">

   <!--Code for autocomplete-->
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script>
      $(function () {
         $("#shop_product").autocomplete({
            source: "{% url 'shop' %}",
            minLength: 2
            });
         });
   </script>
<input type="submit" name="button_add" value="Add">
</form>
</div>

<div>
<table>
{% for item in items %}
<tr>
   <form id="shop_delete" action="{% url 'shop_delete' %}" method="post">
      <td name="product" id="product">{{ item.product }}</td>
      <td><button type="submit" name="delete">X</button></td>
   </form>
</tr>
{% endfor %}
</table>
</div>

views.py

def shop(request):
    if request.method == "POST":
        if request.POST["button_add"] == "Add":
            user = request.user
            product = request.POST["shop_product"]
            date=datetime.date.today()

            if product != "": Shopping_List.objects.create(user=user, date=date, product=product)
        else:
            print("delete")

    if 'term' in request.GET:
        qs = Shop.objects.filter(product__icontains=request.GET.get('term'))
        items = list()
        for product in qs:
            items.append(product.product)
        # titles = [product.title for product in qs]
        return JsonResponse(items, safe=False)
    
    items = Shopping_List.objects.all().filter(user=request.user, date=datetime.date.today())
    return render(request, "shop.html", {
        "items": items
    })

def shop_delete(request):
    if request.method == "POST":
        product = request.POST.get("product")
        print(product)
    return redirect('shop')

CodePudding user response：

Your form doesn't contain any input and, hence, no input data is submitted with the POST request.

#This is not an input
<td name="product" id="product">{{ item.product }}</td>

When you use a valid form input, you'll be able to retrieve the product name in your view.

For example, you could add a hidden field with the product name. Then you wouldn't need to redesign your table elements.

   <form id="shop_delete" action="{% url 'shop_delete' %}" method="post">
      <td id="product">{{ item.product }}</td>
      <input type="hidden" value="{{item.product}}" name="product">
      <td><button type="submit" name="delete">X</button></td>
   </form>