我正在尝试为一家餐厅的菜单创建一个网页,其中包含菜单(食物的名称和价格)。我想要的是在前端,当用户通过单击复选框选择菜单时,他会获得网页上的总价格。此外,为了能够提取他选择的菜单名称并使用 pythonflask 将它们保存在 MySQL 数据库中。
我所做的是从数据库创建两个列表,一个是食物名称,另一个是价格,但我得到的是这个。
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>
最佳答案
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)
将您的 flask 模板部分更新为以下代码
{% 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 %}
关于python - 我如何获取所选复选框的总和并将所选项目保存在数据库 mysql 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57405778/