Как обновить таблицу SQLite на основе значения флажка во Flask?

Question

У меня есть база данных SQLite, которая содержит данные о таких продуктах, как Product Name, Description и Like, которые показывают, нравится ли продукт пользователю или нет.

Пользователь ищет различные продукты, которые заполняют таблицу именем, описанием и флажком, который устанавливается, если значение Like равно 1 в базе данных, и не отмечается, если нет. Я реализовал кнопку с помощью (как видно из index.html)

<form method = "POST"> <input type="checkbox" name="like" {% if product.like == 1 %} checked {% else %} {% endif %}>

Теперь я хочу, чтобы пользователь мог устанавливать и снимать флажки в таблице, а затем нажатькнопка, которая обновляет столбец Like в базе данных, как мне это сделать?

(Я даже не могу получить доступ к значению кнопки в app.py. При попытке print(requests.form['like']) в строке после name=requests.form['search'] возвращается BadRequestKeyError: The browser sent a request that this server could not understand. KeyError: 'like')

app.py

... 
product = []
@app.route('/', methods = ['POST'])
def index():
   name = None
   if request.method == 'POST':
     name = request.form['search']
     if name is not None or name != "":
        query_product = Products.query.filter(Products.productname==name).first()
        if (query_product is not None) and (query_product not in product):
            company.append(query_company)
   print(company, file = sys.stderr)
   return render_template('index.html', companies = company)

Products класс

class Products(db.Model):
   index = db.Column(db.Integer(), primary_key = True)
   productname = db.Column(db.String(), primary_key = False)
   description = db.Column(db.String(), primary_key = False)
   like = db.Column(db.Integer(), primary_key = False)
   ...more columns

index.html

 <!-- /templates/index.html  -->

{% extends 'base.html' %}
{% block content %}
    <form method="POST">
        <input type="text" placeholder="Search for Product.." name="search">
        <button type="submit" name="submit">Search</button> <button type="submit" name="update" value = company.index style = margin-left:45%>Update</button>
    <div class="product-container" style="overflow: auto; max-height: 80vh">
        <div class="table-responsive">
            <table class="table" id="products">
                <thead>
                    <tr>
                        <th scope="col">Product Name</th>
                        <th scope="col">Description</th>
                        <th scope="col">Like</th>
                    </tr>
                </thead>
                <tbody>
                {% for product in products %}
                    <tr {{company.index}}>
                        <th scope="row">{{ product.productname}}</th>
                        <td> {{ product.description }} </td>
                        <td><form method = "POST"> <input type="checkbox" name="like" {% if product.like == 1 %} checked {% else %} {% endif %}></form></td>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

Answer 1

Я думаю, вам нужно сделать это с помощью javascript и добавить еще один маршрут к вашему бэкэнду, который затем обновит базу данных.

может быть что-то вроде этого, если это произойдет автоматически:

<input type="checkbox" onchange="updateLike('productId', this.checked)">
<script>
async function updateLike(productId, doesLike) {
    let response = await fetch("http://localhost/products/productId/like", {
        method:"POST",
        headers: {"Content-Type":"application/json"},
        body: JSON.stringify({
            productId: productId,
            like: doesLike
        })
    });
}
</script>

или вы можете добавить кнопку, которая отправляет запрос на сервер.

<input type="checkbox" name="like"/>
<button onclick="updateLike('productId', document.querySelector('input[name=like]').checked)">confirm</button>