Question

我试图在包含菜单（名称和食物价格）的餐厅中为菜单创建网页。当用户通过单击复选框选择菜单时，我想要的是在前端，他可以在网页上获得总价。另外，为了能够提取他选择的菜单名称，并使用python flask将其保存在MySQL数据库中。

我要做的是从数据库中创建两个列表，一个是食物名称，另一个是价格，但是我得到的是这个。

the result i get

def ef menu1():
    cur = mysql.connection.cursor()
    cur.execute('''SELECT name FROM menu ''')
    name = cur.fetchall()
    cur.execute('''SELECT price FROM menu ''')
    price = cur.fetchall()
    cur.execute('''SELECT MAX(num) FROM menu''')
    maxi=cur.fetchone()
    maxid = int(maxi[0])

    return render_template('test4.html',name = name,price=price , maxid=maxid)

<div class= "row" style="background-image: url('{{url_for('static',filename='images/bg-01.jpg')}}');"><!-- -->     
    <div class= "col-lg-6">
        <br>
        <p>
            <strong>Food</strong> 
            <br />
            {% for n in range(maxid) %}
            <br />
            <input class="my-activity" type="checkbox" name="activity['food']['breakfast']" value="{{price[n]}}"> The Menu {{name[n]}} is {{price[n]}} Tshs
            <br/> 
            {% endfor %}
        </p> 
        <p>
            <strong>Amount (US$)</strong>: 
            <input type="text" name="amount" id="amount" />
        </p>
    </div>
</div>

<script src="{{url_for('static',filename='js/jquery-3.4.1.js')}}" ></script>
    <script src="{{url_for('static',filename='js/bootstrap.min.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function() {        
            $(".my-activity").click(function(event) {
                var total = 0;
                $(".my-activity:checked").each(function() {
                    total += parseInt($(this).val());
                });
                if (total == 0) {
                    $('#amount').val('');
                } else {                
                    $('#amount').val(total);
                }
            });
        });    
    </script>

Answer 1

HTML和jQuery非常完美，并且您正在呈现复选框无效的值。

所以我简化了您的Python代码。

def ef_menu1():
    cur = mysql.connection.cursor()
    cur.execute('SELECT name,price FROM menu')
    name = cur.fetchall()
    cur.close()    
    return render_template('test4.html', name=name)

将烧瓶模板部分更新为以下代码

{% for n in name %}
<br />
<input class="my-activity" type="checkbox" name="activity['food']['breakfast']" value="{{n[1]}}"> The Menu {{n[0]}} is {{n[1]}} Tshs
<br/> 
{% endfor %}

我如何获得选定复选框的总和并将选定项保存在数据库mysql中

1 个答案: