javascript - Javascript:表单提交事件未触发
问题描述
我正在尝试为我的表单触发提交事件,但由于某种原因它没有被激活......
我在提交类型的表单中添加了一个按钮,并在正文末尾有一个脚本,该脚本引用了与表单相关的 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);
});
解决方案
您在</form>
表单的开始标签之后有一个额外的错位结束标签。只需将其删除,它应该可以正常工作。
推荐阅读
- testing - VSTest.Console.exe 中用于 Win Universal Apps 单元测试的 FrameworkUap10 在哪里
- css - 当浏览器窗口调整大小时,在居中元素和绝对/固定元素之间平滑移动
- excel - 需要帮助在 Excel 中的两个不相似列表中查找匹配项
- python - 如何找到一个巨大的 csv 文件的 10 个最大值?
- spring - 弹簧集成。缺少消息。民意调查导致消息:GenericMessage
- c - 将NULL分配给C中链表中的头节点
- sql-server - HSQLDB Junit 测试对 DB2 和 SQL Server NOLOCK 查询失败
- angular - PrimeNG - 留言
- angular - Angular - 更新根 index.html 中的 html 属性
- angular - markAsUntouched 未清除红线