主页 / 问题 / 1542794
Accepted
Alexey
Asked:2023-09-27 15:03:20 +0000 UTC2023-09-27 15:03:20 +0000 UTC

为什么表单提交事件没有触发？

  • 772

有以下最低限度可重现的示例：

<form id="upload-form" enctype="multipart/form-data">
    <input type="file" id="file-input" style="display: none;" />
    <label for="file-input" id="file-label">Выберите файл</label>
</form>

<script>
    const fileInput = document.getElementById('file-input');
    const fileLabel = document.getElementById('file-label');
        
    fileInput.addEventListener('change', (event) => {
        alert("File selected!");
        document.getElementById('upload-form').submit();
    });

    document.getElementById('upload-form').addEventListener('submit', (event) => {
        event.preventDefault();
        alert("Form send!");
    });
</script>

为什么在这种情况下，表单未发送/无法addEventListener与参数一起使用submit？那些。alert("File selected!"); 它有效，但alert("Form send");它不...

先感谢您！

javascript

1 个回答

  1. Best Answer

    你的错误是你认为一个方法submit()会引发一个事件submit，但事实上它不会。

    您可以通过阅读MDN 中的几行来验证这一点：

    此方法与<button>按钮类似但不完全相同。，这会激活表单的提交。但是，直接调用该方法时：

    submit您可以使用方法来代替 方法requestSubmit，该方法不存在上述问题，但仅在现代浏览器上支持。

    另外，正如@Quazimorda指出的那样，该方法preventDefault阻止标准事件（即本例中的表单提交）。使用上面的信息，代码如下：

    <form id="upload-form" enctype="multipart/form-data">
    <input type="file" id="file-input" style="display: none;" />
    <label for="file-input" id="file-label">Выберите файл</label>
</form>

<script>
    const fileInput = document.getElementById('file-input');
    const fileLabel = document.getElementById('file-label');
        
    fileInput.addEventListener('change', (event) => {
        alert("File selected!");
        const form = document.getElementById('upload-form');
        form[typeof form.requestSubmit !== 'undefined' ? 'requestSubmit' : 'submit']();
    });

    document.getElementById('upload-form').addEventListener('submit', (event) => {
        alert("Form send!");
    });
</script>
    • 1

相关问题