Javascript：表单提交事件未触发

Question

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

我在提交类型的表单中添加了一个按钮，并在正文末尾有一个脚本，该脚本引用了与表单相关的 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 %}

脚本.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);
});

Answer 1

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