Question

类型错误：this.form.submit 不是一个函数

2021-05-13

1527

javascript html node.js ejs

我创建了一个表单，其中有一个 select 下拉菜单，可在 javascript/html 中提交表单...

这里是：

 <form action="/adminFilter" method="POST">
    <select name="filter" id="selectBox" onchange="this.form.submit()">
    <option value="">FILTER</option>
    <option value="All">All</option>
    <option value="ACTIVE">Registered</option>
    <option value="WAITLIST">Waitlisted</option>
    <option value="CANCELLED">Cancelled</option>
    </select>
</form>

但是，当我更改其中一个值时，它实际上会在 Web 控制台中显示此错误。

TypeError: this.form.submit is not a function. (In 'this.form.submit()', 'this.form.submit' is an instance of RadioNodeList)

为什么会发生这种情况，我该如何解决？我基本上想在有人更改 select 下拉菜单的值时提交表单。这样可行吗？

已编辑：

<script>
    // write the function
    function submitForm() {
        document.querySelector("#my-form").submit();
    }
    
 </script>
    

   
<form action="/adminFilter" method="POST" id="my-form">
    <select name="filter" id="selectBox" onchange="submitForm();">       
         <option value="">FILTER</option>
    <option value="All">All</option>
    <option value="ACTIVE">Registered</option>
    <option value="WAITLIST">Waitlisted</option>
    <option value="CANCELLED">Cancelled</option>
    </select>
</form>

错误：

TypeError: null is not an object (evaluating 'document.querySelector("#my-form").submit')

Answer 1

尝试为 form 指定一个 id ，每当 select 的值发生变化时，就使用您指定的 id 提交表单。例如：

<script>
// write the function
function submitForm() {
    document.querySelector("#my-form").submit();
}

<script/>

<form action="/adminFilter" method="POST" id="my-form">
<select name="filter" id="selectBox" onchange="submitForm();">

Answer 2

为您的表单命名，以便可以直接从文档对象中查询它。

<form action="/adminFilter" method="POST">
    <select name="filter" id="selectBox" onchange="onchange="this.parentNode.submit()">
    <option value="">FILTER</option>
    <option value="All">All</option>
    <option value="ACTIVE">Registered</option>
    <option value="WAITLIST">Waitlisted</option>
    <option value="CANCELLED">Cancelled</option>
    </select>
</form>

编辑：

您可以调用函数 onchange 以便可以访问文档对象。

<form action="/adminFilter" method="POST" name="myform">
    <select name="filter" id="selectBox" onchange="doSubmit()">
    <option value="">FILTER</option>
    <option value="All">All</option>
    <option value="ACTIVE">Registered</option>
    <option value="WAITLIST">Waitlisted</option>
    <option value="CANCELLED">Cancelled</option>
    </select>
</form>

并在 JS 中

function doSubmit() {
  console.log(document.myform);
  document.myform.submit();
}