英文:
Python Flask When form option is selected, run script and display results in table?
问题
I've translated the non-code portions of your text:
我正在使用Python Flask和Bootstrap运行程序。当我的两个表单选择都填写好后,我想要提交表单,然后运行我的脚本。
我的脚本已经制作好并且正常运行。它会输出每一行的数据,如下所示:
1.25:7000
2.75:13000
6.40:50400
(有时输出的行数多于或少于3行,因为每个产品的情况都不同)
所以,当有人填写好这两个选择项后,我将把这两个选择项传递给我的脚本,以获取每个卖家的价格和库存信息,输出的格式如上所示。
然后,我想要更新并在我的网站上显示这些数据。
在上面的示例中,脚本应该将价格更新为1.25,库存更新为70,400(因为7000+13000+50400)。
然后,我想要显示一个表格,只有在选择了这两个选项后才会出现,它应该如下所示:
价格|库存
1.25 |7000
2.75 |13000
6.40 |50400
我希望这个表格出现在表单下面的任何位置。
我的模板代码:
{% extends "base.html" %}
{% block content %}
{% if current_user.is_authenticated %}
欢迎 {{current_user.email}}!
{% else %}
价格列表
{% endif %}
{% endblock %}
Python文件:
from flask import Blueprint, render_template
from flask_login import login_required
core_bp = Blueprint("core", name)
@core_bp.route("/")
#@login_required
def home():
return render_template("core/index.html")
def getPrices(service, country):
if service=="1" and country=="uk":
return("1.25:7000\n2.75:13000\n6.40:50400")
英文:
So I am running Python Flask with Bootstrap. And when both of my form selects are filled in I would like to submit the form, which would then run my script.
My script is already made and works fine. It outputs data for every new line like so:
1.25:7000
2.75:13000
6.40:50400
(Sometimes the output is more or less than 3 lines as it varies per product)
So after somebody fills out the two select options, I will pass the two select options onto my script in order to fetch the prices and stocks for each seller, which the output is displayed like so above.
Then I would like to update and display this data onto my website.
In the example above, the script should make the Price update to 1.25 and stock 70,400 (since 7000+13000+50400)
Then I would like to display a table, which would only appear after the two options are selected and it would look like this:
Price|Stock
1.25 |7000
2.75 |13000
6.40 |50400
I would like this to appear under everything on the form.
My template code:
{% extends "_base.html" %}
{% block content %}
{% if current_user.is_authenticated %}
<h3 class="text-center">Welcome {{current_user.email}}!</h3>
{% else %}
<h3 class="text-center">Price List</h3>
{% endif %}
<br>
<div class="form-group">
<form action="" method="post">
<div class="input-group mb-3-center" style="display: flex;justify-content: center;">
<div class="input-group-prepend">
<label for="inputsm">Country</label>
<br>
<select class="selectpicker" title="Choose a country..." data-live-search="true" id="country">
<option value="uk">United Kingdom</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<br>
<br>
<label for="inputsm">Service</label>
<br>
<select class="selectpicker" title="Choose a service..." data-live-search="true" id="service">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<br>
<br>
<label for="inputsm">Price</label>
<span class="input-group-text" style="font-size: medium;">$</span>
<br>
<label for="inputsm">Stock</label>
<span class="input-group-text" style="font-size: medium;">-</span>
<br>
</div>
</div>
</form>
{% endblock %}
Python file:
from flask import Blueprint, render_template
from flask_login import login_required
core_bp = Blueprint("core", __name__)
@core_bp.route("/")
#@login_required
def home():
return render_template("core/index.html")
def getPrices(service,country):
if service=="1" and country=="uk":
return("1.25:7000\n2.75:13000\n6.40:50400")
答案1
得分: 0
你可以在你的HTML中的select
元素上添加一个onchange
监听器。最简单的方式是为select
添加一个额外的值,例如"Choose a value",这样你可以测试用户是否已经选择了它。
更新的模板:
<div class="form-group">
<form action="" method="post">
<div class="input-group mb-3-center" style="display: flex;justify-content: center;">
<div class="input-group-prepend">
<label for="inputsm">Country</label>
<br>
<select class="selectpicker" title="选择一个国家..." data-live-search="true" id="country" onchange="update()">
<option value="select">选择一个国家</option>
<option value="uk">英国</option>
<option value="2">二</option>
<option value="3">三</option>
</select>
<br>
<br>
<label for="inputsm">Service</label>
<br>
<select class="selectpicker" title="选择一个服务..." data-live-search="true" id="service" onchange="update()">
<option value="select">选择一个服务</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>
<br>
<br>
<label for="inputsm">Price</label>
<span class="input-group-text" style="font-size: medium;">$</span>
<br>
<label for="inputsm">Stock</label>
<span class="input-group-text" style="font-size: medium;">-</span>
<br>
</div>
</div>
</form>
</div>
<script>
function update() {
const countrySelect = document.getElementById('country').value;
const serviceSelect = document.getElementById('service').value;
if (countrySelect !== 'select' && serviceSelect !== 'select') {
// 向服务器发送POST请求,包括国家和服务
// 使用返回值来填充表格
}
}
</script>
服务器部分需要更新如下:
@core_bp.route("/")
#@login_required
def home():
return render_template("core/index.html")
@core_bp.post('/prices')
def getPrices():
country = request.values.get('country')
service = request.values.get('service')
if service=="1" and country=="uk":
return("1.25:7000\n2.75:13000\n6.40:50400")
最好返回一个JSON对象,这样你可以更容易地在你的JS中获取这些值。
英文:
You can add an onchange
listener to the select
s in your HTML. It would be easiest to add an additional value to the select
s, e.g. "Choose a value" so that you could test whether the user has selected it or not.
Updated template:
<div class="form-group">
<form action="" method="post">
<div class="input-group mb-3-center" style="display: flex;justify-content: center;">
<div class="input-group-prepend">
<label for="inputsm">Country</label>
<br>
<select class="selectpicker" title="Choose a country..." data-live-search="true" id="country" onchange="update()">
<option value="select">Select a country</option>
<option value="uk">United Kingdom</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<br>
<br>
<label for="inputsm">Service</label>
<br>
<select class="selectpicker" title="Choose a service..." data-live-search="true" id="service" onchange="update()">
<option value="select">Select a service</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<br>
<br>
<label for="inputsm">Price</label>
<span class="input-group-text" style="font-size: medium;">$</span>
<br>
<label for="inputsm">Stock</label>
<span class="input-group-text" style="font-size: medium;">-</span>
<br>
</div>
</div>
</form>
</div>
<script>
function update() {
const countrySelect = document.getElementById('country').value;
const serviceSelect = document.getElementById('service').value;
if (countrySelect !== 'select' && serviceSelect !== 'select') {
// POST req to your server with the country and service
// use the return val to populate the table
}
}
</script>
{% endblock %}
And the server would have to be updated with something like:
@core_bp.route("/")
#@login_required
def home():
return render_template("core/index.html")
@core_bp.post('/prices')
def getPrices():
country = request.values.get('country')
service = request.values.get('service')
if service=="1" and country=="uk":
return("1.25:7000\n2.75:13000\n6.40:50400")
It'd probably be better to return a JSON object so you can get the values more easily back in your JS.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
- flask
- python
评论