onchange 不通知（与选择字段一起使用）答案

【问题标题】：onchange doesn't notify (used with select field)onchange 不通知（与选择字段一起使用）
【发布时间】：2019-05-19 03:16:02
【问题描述】：

我是 web 开发的新手，我尝试用 flask 和 python 构建一个 web 应用程序。

我需要在选择Select Field的某些东西时收到通知。

我尝试抛出 alert("test") 并显示弹出窗口。
我的第二次尝试是设置onchange="this.form.submit()"
我的第三次尝试是设置onchange="document.getElementById('model_form').submit()"

但是什么也没发生，表单没有提交。

我在浏览器控制台中看到了这些异常：

Uncaught TypeError: document.getElementById(...).submit is not a function at 
HTMLSelectElement.onchange

Uncaught TypeError: this.form.submit is not a function at 
HTMLSelectElement.onchange

这是由flask渲染的html代码：

<form id="model_form" action="" method="post" enctype="multipart/form-data">
        <div class="table-responsive">
            <table class="table table-bordered">
                ...
            <td>
                <select id="myField" name="myField" onchange="this.form.submit()"><option value="b">b</option><option value="a">a</option></select>
               <span class="help-block"></span>

            </td>
                ...
                <div class="well well-sm">
        <button type="submit" class="btn  btn-sm btn-primary">Save
            <i class="fa fa-save"></i></button>
    </div>
</form>

保存按钮可以正常工作并提交表单。如何在选择字段中选择某些东西时收到通知？

【问题讨论】：

这有帮助吗？ --- stackoverflow.com/a/52593167/11308431

标签： javascript html

【解决方案1】：

下面的 sn-p 正是你想要的。

在 javascript 代码中，我捕获了这两个元素并将它们保存在变量中。我在 select 元素中添加了 on change 事件，负责处理 select change 事件的函数在控制台上记录选择的值并调用 Form 元素的 submit 方法。

希望对你有帮助。

const form = document.getElementById('model_form');
const select = document.getElementById('myField');

const handleSelectChange = function(e) {
  console.log(e.target.value);
  form.submit();
}

select.addEventListener('change', handleSelectChange);

<form id="model_form" action="" method="post" enctype="multipart/form-data">
        <div class="table-responsive">
            <table class="table table-bordered">
                ...
            <td>
                <select id="myField" name="myField"><option value="b">b</option><option value="a">a</option></select>
               <span class="help-block"></span>

            </td>
                ...
                <div class="well well-sm">
        <button type="submit" class="btn  btn-sm btn-primary">Save
            <i class="fa fa-save"></i></button>
    </div>
</form>

【讨论】：