表单提交阻止默认行为并执行getPlot()函数异常问题求助

你的表单提交行为不稳定，核心原因大概率是事件绑定不可靠或存在额外触发表单提交的场景，以下是针对性的解决步骤：

1. 确保表单元素能被正确获取 #

你的JS代码通过document.getElementById('formDistrict')获取表单，但从你提供的HTML代码来看，render_form生成的表单并没有指定id="formDistrict"属性。如果表单找不到，事件绑定根本不会生效，这会导致偶尔默认提交、偶尔正常执行的随机问题。

修复方式 #

在Flask模板渲染表单时，显式指定表单ID：

{{ render_form(params.form, form_id='formDistrict', novalidate=True) }}

• form_id='formDistrict'：确保JS能精准定位到表单
• novalidate=True：禁用浏览器默认的HTML5表单验证，避免验证弹窗干扰事件处理

2. 优化事件绑定逻辑 #

改用事件委托替代直接绑定到表单元素，这种方式对动态生成的元素更可靠，也能避免绑定时机的问题：

document.addEventListener("DOMContentLoaded", function(){
    // 监听全局的submit事件，仅处理目标为指定表单的情况
    document.addEventListener('submit', function(e) {
        if (e.target.id === 'formDistrict') {
            e.preventDefault(); // 优先阻止默认提交行为
            getPlot();
        }
    });
});

如果你不想用事件委托，也可以给表单绑定事件时增加存在性检查：

document.addEventListener("DOMContentLoaded", function(){
    const form = document.getElementById('formDistrict');
    if (!form) {
        console.error('表单元素未找到，请检查ID是否正确');
        return;
    }
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        getPlot();
    });
});

3. 处理jQuery UI Autocomplete的额外触发场景 #

Autocomplete组件在用户选择选项后按回车，可能会意外触发表单提交。可以在Autocomplete的配置中阻止这种行为（需放在外部JS文件中，符合CSP要求）：

$(function() {
    $("#district_autocomplete").autocomplete({
        // 你的Autocomplete数据源等配置
        select: function(event, ui) {
            event.preventDefault(); // 阻止回车触发表单提交
            $(this).val(ui.item.value); // 手动设置选中的值
        },
        close: function(event) {
            event.preventDefault(); // 关闭下拉框时也阻止默认行为
        }
    });
});

4. 替代方案：直接绑定提交按钮的点击事件 #

如果表单提交始终不稳定，可以跳过表单的submit事件，直接给提交按钮绑定点击事件：

document.addEventListener("DOMContentLoaded", function(){
    const submitBtn = document.querySelector('#formDistrict input[type="submit"]');
    if (submitBtn) {
        submitBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            getPlot();
        });
    }
});

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