如何通过点击按钮获取HTML表单中的文本值（Flask场景）

我正在用Python和Flask做Web开发，想做一个让用户输入数字、后台用Python脚本处理的网站。现在用HTML表单获取输入，但只有在输入框按回车才能把值传给Flask函数，点击按钮不行。相关代码如下：

我的HTML代码 #

<body>
    <div class="start">
        <form action="/submit" method="post">
            <input type="submit" class="start-button" value="start">
        </form>
    </div>

    <div class="Filter-options">

        <form action="/modify" method="post" class="price">
            <p>Preis:</p>
            <label for="option1">
                <input type="text" name="options" class="price-field" value="0">
            </label>
        </form>

    </div>

</body>

我的Flask代码 #

from flask import Flask, render_template, request
from livereload import Server
import sys


sys.path.insert(0, "C:\Users\Myuse\Downloads\cellular_contract-main (1)\cellular_contract-main")
print()
app = Flask(__name__)

@app.route('/')
def Home():
    return render_template("home.html")

@app.route("/submit", methods=["POST"])
def submit():
    if request.method == "POST":
        text_value = request.form.get("options")
        from compare import main
        result = main(text_value)
        return f"{result}"  

# @app.route("/modify", methods=["POST"])
# def modify(text_input=None):
#     if text_input is None:
#         text_input = float(request.form.get("options"))
    
    

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

问题原因 #

核心问题是输入框和提交按钮分属两个独立的<form>标签：

• 点击start按钮时，提交的是第一个<form action="/submit">，这个表单里没有name="options"的输入控件，所以Flask的request.form.get("options")拿不到值。
• 输入框按回车时，触发的是它所在的第二个<form action="/modify">的提交，所以能正常获取值，但这不是预期的触发方式。

解决方案 #

方案1：将按钮和输入框放在同一个表单（推荐）

把start按钮移到包含输入框的表单里，点击按钮时会提交整个表单，自动带上输入框的值。修改后的HTML：

<body>
    <div class="Filter-options">
        <form action="/submit" method="post" class="price">
            <p>Preis:</p>
            <label for="option1">
                <input type="text" name="options" class="price-field" value="0">
            </label>
            <!-- 把start按钮移到这个表单内 -->
            <input type="submit" class="start-button" value="start">
        </form>
    </div>
</body>

对应的Flask代码可优化输入校验（避免非数字输入报错）：

from flask import Flask, render_template, request
import sys

sys.path.insert(0, "C:\\Users\\Myuse\\Downloads\\cellular_contract-main (1)\\cellular_contract-main")
app = Flask(__name__)

@app.route('/')
def Home():
    return render_template("home.html")

@app.route("/submit", methods=["POST"])
def submit():
    if request.method == "POST":
        text_value = request.form.get("options")
        # 校验输入合法性
        if not text_value:
            return "请输入有效数字"
        try:
            text_value = float(text_value)
        except ValueError:
            return "请输入合法的数字"
        from compare import main
        result = main(text_value)
        return f"{result}"  

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

方案2：保留原有布局，用JavaScript处理

如果不想调整表单结构，可以给按钮绑定点击事件，手动收集输入值并提交表单。修改后的HTML：

<body>
    <div class="start">
        <button class="start-button" onclick="submitInput()">start</button>
    </div>

    <div class="Filter-options">
        <form id="priceForm" action="/submit" method="post" class="price">
            <p>Preis:</p>
            <label for="option1">
                <input type="text" name="options" class="price-field" value="0" id="optionsInput">
            </label>
        </form>
    </div>

    <script>
        function submitInput() {
            // 手动触发表单提交
            document.getElementById('priceForm').submit();
        }
    </script>
</body>

Flask代码和方案1保持一致即可。

可选：使用/modify路由

如果原本想使用/modify路由，只需把表单的action改为/modify，并取消Flask中对应路由的注释并完善逻辑：

@app.route("/modify", methods=["POST"])
def modify():
    text_input = request.form.get("options")
    if not text_input:
        return "请输入有效数字"
    try:
        text_input = float(text_input)
    except ValueError:
        return "请输入合法的数字"
    from compare import main
    result = main(text_input)
    return f"{result}"

内容的提问来源于stack exchange，提问作者user17627774