Python Flask 当选择表单选项时,运行脚本并在表格中显示结果?

huangapple go评论68阅读模式
英文:

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 selects in your HTML. It would be easiest to add an additional value to the selects, e.g. "Choose a value" so that you could test whether the user has selected it or not.

Updated template:

&lt;div class=&quot;form-group&quot;&gt;
&lt;form action=&quot;&quot; method=&quot;post&quot;&gt;
&lt;div class=&quot;input-group mb-3-center&quot; style=&quot;display: flex;justify-content: center;&quot;&gt;
    &lt;div class=&quot;input-group-prepend&quot;&gt;
    &lt;label for=&quot;inputsm&quot;&gt;Country&lt;/label&gt;
    &lt;br&gt;
    &lt;select class=&quot;selectpicker&quot; title=&quot;Choose a country...&quot; data-live-search=&quot;true&quot; id=&quot;country&quot; onchange=&quot;update()&quot;&gt;
      &lt;option value=&quot;select&quot;&gt;Select a country&lt;/option&gt;
      &lt;option value=&quot;uk&quot;&gt;United Kingdom&lt;/option&gt;
      &lt;option value=&quot;2&quot;&gt;Two&lt;/option&gt;
      &lt;option value=&quot;3&quot;&gt;Three&lt;/option&gt;
    &lt;/select&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;label for=&quot;inputsm&quot;&gt;Service&lt;/label&gt;
    &lt;br&gt;
    &lt;select class=&quot;selectpicker&quot; title=&quot;Choose a service...&quot; data-live-search=&quot;true&quot; id=&quot;service&quot; onchange=&quot;update()&quot;&gt;
      &lt;option value=&quot;select&quot;&gt;Select a service&lt;/option&gt;
      &lt;option value=&quot;1&quot;&gt;One&lt;/option&gt;
      &lt;option value=&quot;2&quot;&gt;Two&lt;/option&gt;
      &lt;option value=&quot;3&quot;&gt;Three&lt;/option&gt;
    &lt;/select&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;label for=&quot;inputsm&quot;&gt;Price&lt;/label&gt;
    &lt;span class=&quot;input-group-text&quot; style=&quot;font-size: medium;&quot;&gt;$&lt;/span&gt;
    &lt;br&gt;
    &lt;label for=&quot;inputsm&quot;&gt;Stock&lt;/label&gt;
    &lt;span class=&quot;input-group-text&quot; style=&quot;font-size: medium;&quot;&gt;-&lt;/span&gt;
    &lt;br&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;script&gt;
function update() {
  const countrySelect = document.getElementById(&#39;country&#39;).value;
  const serviceSelect = document.getElementById(&#39;service&#39;).value;

  if (countrySelect !== &#39;select&#39; &amp;&amp; serviceSelect !== &#39;select&#39;) {
    // POST req to your server with the country and service
    // use the return val to populate the table 
  }
}
&lt;/script&gt;
{% endblock %}

And the server would have to be updated with something like:

@core_bp.route(&quot;/&quot;)
#@login_required
def home():
    return render_template(&quot;core/index.html&quot;)

@core_bp.post(&#39;/prices&#39;)
def getPrices():
    country = request.values.get(&#39;country&#39;)
    service = request.values.get(&#39;service&#39;)
    if service==&quot;1&quot; and country==&quot;uk&quot;:
        return(&quot;1.25:7000\n2.75:13000\n6.40:50400&quot;)

It'd probably be better to return a JSON object so you can get the values more easily back in your JS.

huangapple
  • 本文由 发表于 2023年6月12日 04:43:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/76452453.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定