表单提交时页面重新加载，getElementById返回null，表单无法工作

当遇到表单提交时页面重新加载，导致getElementById返回null，表单无法正常工作的问题时，通常是由于以下几个原因造成的：

基础概念

表单提交：表单提交是指用户填写完表单后，通过点击提交按钮将数据发送到服务器的过程。
页面重新加载：表单提交后，默认情况下会刷新整个页面，导致页面上的DOM元素重新加载。
getElementById：这是一个JavaScript方法，用于通过元素的ID获取DOM元素。如果页面重新加载，之前获取的元素引用会丢失。

类型与应用场景

同步提交：传统的表单提交方式，会导致页面刷新。
异步提交（AJAX）：通过JavaScript异步发送请求，页面无需刷新即可更新数据。

问题原因

页面刷新：表单提交后页面重新加载，导致之前通过getElementById获取的元素引用失效。
脚本执行时机：如果脚本在页面加载完成之前执行，可能会找不到对应的DOM元素。

解决方案

方案一：使用事件监听阻止默认行为

通过JavaScript监听表单的提交事件，并阻止其默认行为，然后使用AJAX进行异步提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Submission</title>
</head>
<body>
    <form id="myForm">
        <input type="text" id="name" name="name" required>
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            const formData = new FormData(this);
            fetch('/submit', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        });
    </script>
</body>
</html>

方案二：确保脚本在DOM加载完成后执行

将JavaScript代码放在DOMContentLoaded事件的回调函数中，确保DOM元素已经加载完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Submission</title>
</head>
<body>
    <form id="myForm">
        <input type="text" id="name" name="name" required>
        <button type="submit">Submit</button>
    </form>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('myForm').addEventListener('submit', function(event) {
                event.preventDefault(); // 阻止表单默认提交行为

                const formData = new FormData(this);
                fetch('/submit', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Success:', data);
                })
                .catch((error) => {
                    console.error('Error:', error);
                });
            });
        });
    </script>
</body>
</html>