Web 應用程序：Flask - html - wtforms：帶有兩個提交按鈕的表單

Question

我是編程新手。 我有興趣開發一個帶有兩個輸入值和兩個提交按鈕的簡單 web 應用程序。 數字 A 和 B 由用戶輸入，產品或總和將根據按下的按鈕顯示。 當我使用一個按鈕時，代碼有效； 但是，我似乎無法弄清楚如何使兩個按鈕都起作用。 我在 Flask 和 Python 3.8 中編寫了應用程序並使用了 wtforms。

這是我的代碼：view.html

<table>
  {% for field in form %}
    <tr>
    <td>{{ field.name }}</td><td>{{ field }}</td>
    <td>{{ field.label }}</td>
    </tr>
  {% endfor %}
</table>

<form method="post" action="">
<input type="submit" name="btn" value="Add">
</form>
<p>
<form method="post" action="">
<input type="submit" name="btn" value="Multiply">
</form></p>

<p>
{% if result != None %}
{{result}}
{% endif %}
</p>

Python 代碼views.py

@app.route("/comp", methods=['GET', 'POST'])
def comp():
    form = InputForm(request.form)
    if request.method == 'POST' and form.validate():
        if request.form["btn"] == "Add":
            result = add(form.A.data, form.B.data)
        
        elif request.form["btn"] == "Multiply":
            result = mul(form.A.data, form.B.data)
    else: result = None
    return render_template('view.html', form=form, result=result)

我在一個單獨的文件中定義了 mul() 和 add() 函數，因為我計划在未來進一步擴展應用程序。 這是 function 定義：

def mul(A,B):
    return  A*B
def add(A,B):
    return  A+B

我的 input.py 文件：

from wtforms import Form, FloatField, validators

class InputForm(Form):
    A = FloatField(
        label='A', default=0,
        validators=[validators.InputRequired()])
    B = FloatField(
        label='B', default=0,
        validators=[validators.InputRequired()])

Answer 1

您的值之一是“添加”，但您測試“添加”。 所以，相等性測試失敗

更新：

你在哪里定義add()和mul() ？ 也許改為使用：

if request.form['btn'] == 'Add':
    result = form.A.data + form.B.data

elif request.form['btn'] == 'Multiply':
    result = form.A.data * form.B.data

更新2：

試試這個來診斷：

if request.method == 'POST' and form.validate():
    print(request.form["btn"])
    print(form.A.data, form.B.data)
    print(request.POST)

Answer 2

您有 3 個不同的 forms。 A和B不是您提交的任一表格的一部分。

Answer 3

如果我理解這個問題，然后嘗試這樣做：

從 flask 導入渲染模板，重定向，url_for，flash，請求

@app.route('/comp') #sample only
def comp():

    form = InputForm(request.form)
    if request.method == 'POST' and form.validate()
        if request.form['btn'] == 'Add':
            result = add(form.A.data, form.B.data)

        elif request.form['btn'] == 'Multiply':
            result = mul(form.A.data, form.B.data)
        flash(result) # see the result in the browser
        print('result') # see the result in the terminal
        return redirect(url_for('comp'))
    else:
        result = None
    return render_template('view.html', form=form, result=result)

在 html 中實現 flash 只需在某處添加

{% for msg in get_flashed_messages()%}
   <h1> {{msg}} </h1>
{% endfor %}

我總是添加打印語句和 flash 以進行故障排除，以查看問題出在哪里。

Answer 4

好的，所以我對您的代碼進行了故障排除。 首先這是結果：

Flask 代碼：

from flask import Flask, request, render_template, url_for, flash, redirect
from wtforms import SubmitField, Form, FloatField, validators


app = Flask(__name__)

app.config['SECRET_KEY'] = 'dev'

def mul(A,B):
    return  A*B
def add(A,B):
    return  A+B

# Form
class InputForm(Form):
    A = FloatField(
        label='A', default=0,
        validators=[validators.InputRequired()])
    B = FloatField(
        label='B', default=0,
        validators=[validators.InputRequired()])
   
       
       
@app.route('/comp', methods=['GET', 'POST'])
@app.route('/', methods=['GET', 'POST']) #this so that both url will work
def comp():

    result = ''   #already assign a variable, else will throw error
    form = InputForm(request.form)
    if request.method == 'POST': #First we check if method is post **POINT 2**
            if form.validate(): #Then if form is validate
                print('form ok') #Test if form is ok
                if request.form['btn'] == 'Add':
                    result = add(form.A.data, form.B.data)
                    print(result) 
            
                elif request.form['btn'] == 'Multiply':
                    result = mul(form.A.data, form.B.data)
                    print(result)
                
                flash(result) # **POINT 3**
                return redirect('comp') # This will make your code run forever #**4**     
            else:
                print('form no ok ') #check if form no ok
    else:
        print('request is get') # if you put the form.validate with the method condition, the form will return False as soons as you render the template

    return render_template('view.html', form=form, result=result)


if __name__ == '__main__':
    app.run(debug=True)

HTML 文件：

  <form method="post" action="">
      <table>
        <!-- Generates form fields -->
        <!-- POINT 1 -->
        {% for field in form %}  

            <td>{{ field.name }}</td><td>{{ field }}</td>
            <td>{{ field.label }}</td>
          </tr>
          
        {% endfor %}
        
        <tr>
          <!-- Input are inside the form tag -->
          <td><input type="submit" name="btn" value="Add"></td>
          <td><input type="submit" name="btn" value="Multiply"></td>

        </tr>
      </table>
    </form>

<!-- Print result in the browser  -->
<!-- Needs to redirect to the same page -->
<!-- return redirect('comp')    -->

  {% for msg in get_flashed_messages()%}
  <h1>   {{msg}} </h1> 
  {% endfor%}

1. 所以主要問題是在 HTML 中，表單沒有與輸入字段一起，因此它是單獨詳細說明表單。 通過將所有內容加在一起，它將開始工作。

2. 在 python 文件中，if request.method == 'POST' 條件與表單同時運行，因此即使在提交之前也返回表單 False。

.3 添加了一個 Flash 方法，以便您可以看到結果

.4 添加重定向，這會將 flash 結果發送到瀏覽器，但最重要的是會刷新表單並讓您可以添加新表單。

請注意，重定向頁面也很重要，因為假設您要將其提交到數據庫中，這將使您提交表單並保存更改。