Flask对接简单HTML表单时提交按钮不工作问题排查

提交按钮点击无响应的问题全部出在前端侧，你已经通过Postman验证过Flask接口正常，不需要排查后端逻辑，按以下顺序修复即可： #

1. 先修复HTML结构硬错误 #

当前HTML存在3个直接影响功能的结构问题：

• 第二个<form>标签完全缺失闭合标签</form>，浏览器解析DOM时结构错乱，按钮事件绑定容易失效
• BHK单选组放在独立的第一个form中，和提交按钮所在的第二个form完全分离，JS获取BHK值时很容易因为跨表单拿不到节点直接抛错，中断函数执行
• 面积输入框重复写了两个class属性，第二个class会被浏览器忽略，虽然不影响提交，但属于不规范写法

修复后的完整HTML参考 #

将两个拆分的form合并为单个表单，补全闭合标签，修正重复属性：

<!DOCTYPE html>
<html>
<head>
    <title>Banglore Home Price Prediction</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="app.css">
</head>
<body>
<div class="img"></div>
<!-- 合并为单个表单，不要拆分 -->
<form class="form">
    <h2>Area (Square Feet)</h2>
    <!-- 移除重复的class属性 -->
    <input class="area floatLabel" type="text" id="uiSqft" name="Squareft" value="1000">
    <h2>BHK</h2>
    <div class="switch-field">
        <input type="radio" id="radio-bhk-1" name="uiBHK" value="1"/>
        <label for="radio-bhk-1">1</label>
        <input type="radio" id="radio-bhk-2" name="uiBHK" value="2" checked/>
        <label for="radio-bhk-2">2</label>
        <input type="radio" id="radio-bhk-3" name="uiBHK" value="3"/>
        <label for="radio-bhk-3">3</label>
        <input type="radio" id="radio-bhk-4" name="uiBHK" value="4"/>
        <label for="radio-bhk-4">4</label>
        <input type="radio" id="radio-bhk-5" name="uiBHK" value="5"/>
        <label for="radio-bhk-5">5</label>
    </div>

    <h2>Bath</h2>
    <div class="switch-field">
        <input type="radio" id="radio-bath-1" name="uiBathrooms" value="1"/>
        <label for="radio-bath-1">1</label>
        <input type="radio" id="radio-bath-2" name="uiBathrooms" value="2" checked/>
        <label for="radio-bath-2">2</label>
        <input type="radio" id="radio-bath-3" name="uiBathrooms" value="3"/>
        <label for="radio-bath-3">3</label>
        <input type="radio" id="radio-bath-4" name="uiBathrooms" value="4"/>
        <label for="radio-bath-4">4</label>
        <input type="radio" id="radio-bath-5" name="uiBathrooms" value="5"/>
        <label for="radio-bath-5">5</label>
    </div>

    <h2>Location</h2>
    <div>
        <select class="location" id="uiLocations">
            <option value="" disabled="disabled" selected="selected">Choose a Location</option>
            <option>Electronic City</option>
            <option>Rajaji Nagar</option>
        </select>
    </div>
    <button class="submit" onclick="onClickedEstimatePrice()" type="button">Estimate Price</button>
    <div id="uiEstimatedPrice" class="result"><h2></h2></div>
<!-- 补全之前缺失的form闭合标签 -->
</form>
</body>
</html>

2. 排查JS侧常见问题 #

HTML修复后如果点击仍无响应，按以下步骤检查app.js：

1. 按F12打开浏览器控制台，切换到Console标签，点击按钮查看报错：
   • 如果报onClickedEstimatePrice is not defined：说明app.js路径配置错误，或者函数没有定义在全局作用域，先确认app.js和HTML文件在同一目录，再检查函数是否被包裹在DOM ready回调或其他闭包内，导致全局访问不到
   • 如果报Cannot read property 'value' of null：说明获取DOM元素的ID写错了，对照HTML中的id（uiSqft/uiBHK/uiBathrooms/uiLocations）逐一核对即可
2. 可以直接参考以下可用的提交函数逻辑，注意将接口地址替换为你自己的Flask路由：

function onClickedEstimatePrice() {
    // 读取表单值
    const sqft = document.getElementById("uiSqft").value;
    const bhk = document.querySelector('input[name="uiBHK"]:checked').value;
    const bath = document.querySelector('input[name="uiBathrooms"]:checked').value;
    const location = document.getElementById("uiLocations").value;

    // 非空校验
    if(!location) {
        alert("请先选择地点");
        return;
    }

    // 发送请求
    $.post("http://localhost:5000/predict_home_price", {
        total_sqft: parseFloat(sqft),
        bhk: parseInt(bhk),
        bath: parseInt(bath),
        location: location
    }, function(data) {
        // 渲染返回结果
        document.getElementById("uiEstimatedPrice").innerHTML = `<h2>预估价格：${data.estimated_price} 万卢比</h2>`;
    }).fail(function(err) {
        console.log("请求错误", err);
        alert("接口请求失败，请查看控制台错误信息");
    });
}

3. 如果你是直接双击打开HTML文件（浏览器地址栏为file://开头），需要在Flask侧配置跨域允许，否则请求会被浏览器拦截，安装flask-cors包开启跨域即可。

快速验证流程 #

1. 替换为修复后的HTML代码
2. 清空浏览器控制台原有报错
3. 点击提交按钮，根据控制台输出的报错信息对照上述问题点定位即可

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