Javascript：表单提交事件未触发答案

【问题标题】：Javascript: Form submit event not triggeringJavascript：表单提交事件未触发
【发布时间】：2021-05-02 15:47:03
【问题描述】：

我正在尝试为我的表单触发提交事件，但由于某种原因它没有被激活...

我在 submit 类型的表单中添加了一个按钮，并在正文末尾有一个脚本，该脚本引用了与表单相关的 javascript 函数...

有什么想法吗？？

html

{% extends "layout.html" %}

{% block title %}Upload{% endblock %}

{% block body %}

<div class="container">
  <form action="/upload" id="upload-form" method="POST" enctype="multipart/form-data"></form>
  <div class="form-group">
    <h1>Upload</h1>
    <p>Use this form to upload a json file.</p>
  </div>
  <div class="form-row">
    <div class="form-group">
      <label for="file-input">JSON file</label>
      <input type="file" accept=".json" class="form-control-file" id="file-input" />
    </div>
  </div>
  <div class="form-row">
    <pre id="file-contents"></pre>
  </div>
  <button id="clear-button" type="reset" class="btn btn-primary" disabled="true">Clear</button>
  <button id="submit-button" type="submit" class="btn btn-primary" disabled="true">Submit</button>
  </form>
</div>

<script src="/static/js/script.js"></script>

{% endblock %}

script.js


/**
 * Event handler for form submission
 */
document.querySelector("#upload-form").addEventListener('submit', async event => {

    console.log("FORM SUBMIT HANDLER");

    event.preventDefault();

    const formData = new FormData(event.target);
    const fileString = formData.get('file-contents');

    const payload = JSON.stringify({
        file: fileString
    });

    console.log("SENDING : " + payload);

    const response = await sendFile(payload);

    console.log(response);
});

【问题讨论】：

不要将异步函数传递给addEventListener。它不会等他们
移除 preventDefault
event.preventDefault 停止提交。准备好后使用this.submit() 提交表单？
@evolutionxbox，不正确。在事件处理程序中使用异步非常好。
尝试删除 event.preventDefault()。控制台中没有显示任何内容，即没有显示 FORM SUBMIT HANDLER 消息...

标签： javascript html bootstrap-4

【解决方案1】：

您在表单的开始标记之后有一个额外的错位 </form> 结束标记。只需将其删除，它应该可以正常工作。

【讨论】：