表单提交页面刷新问题求助：已用e.preventDefault()仍无效

核心问题 #

1. 表单提交时页面强制刷新回到顶部，e.preventDefault()未生效
2. 页面刷新时会自动触发邮件发送操作

代码错误定位 #

1. 元素获取错误 #

你错误地将提交按钮的选择器写成了提示信息元素的ID：

// 错误代码
feedbackSubmit = document.getElementById('feedback-message')
// 正确写法
feedbackSubmit = document.getElementById('feedback-submit')

2. 邮件发送逻辑全局执行 #

emailjs.sendForm直接写在全局作用域里，页面一加载就会自动执行，导致刷新页面就触发提交。

3. 事件监听对象错误 #

提交按钮监听submit事件无效，应该给表单元素监听submit事件（兼容按钮点击和回车提交两种场景）。

4. HTML标签关联错误 #

邮箱输入框的label标签for属性写错为name，应该对应输入框的IDemail，否则标签无法正确关联输入框。

修正后的完整代码 #

HTML代码 #

<form action="" class="feedback__form" id="feedback-form">
    <div class="feedback__group">
        <div class="feedback__box">
            <input type="text" name="user_name" class="feedback__input" id="name" required placeholder="First Name">
            <label for="name" class="feedback__label">First Name</label>
        </div>

        <div class="feedback__box">
            <input type="email" name="user_email" class="feedback__input" id="email" required placeholder="Email Address">
            <label for="email" class="feedback__label">Email Address</label>
        </div>
    </div>

    <div class="feedback__box">
        <input type="text" name="user_subject" class="feedback__input" id="subject" required placeholder="Subject">
        <label for="subject" class="feedback__label">Subject</label>
    </div>

    <div class="feedback__box feedback__area">
        <textarea name="user__message" id="message" class="feedback__input" required placeholder="Message"></textarea>
        <label for="message" class="feedback__label">Message</label>
    </div>

    <p class="feedback__message" id="feedback-message"></p>
    <button type="submit" class="feedback__button button" id="feedback-submit">
        <i class="ri-send-plane-line"></i>Send Message
    </button>
</form>

JavaScript代码 #

const feedbackForm = document.getElementById('feedback-form'),
      feedbackMessage = document.getElementById('feedback-message'),
      feedbackSubmit = document.getElementById('feedback-submit')

const sendEmail = (e) => {
    e.preventDefault() // 彻底阻止表单默认刷新行为

    // 仅在提交时执行邮件发送逻辑
    emailjs.sendForm('service_mbynjbg','template_xm8yzfd','#feedback-form','SroPTASblucuUzgXt')
    .then(() =>{
        feedbackMessage.textContent = 'Message sent successfully :D'

        setTimeout(() =>{
            feedbackMessage.textContent = ''
        }, 5000)
        
        feedbackForm.reset()
    }, () => {
        feedbackMessage.textContent = 'Message not sent (service error)'
    })
}

// 给表单绑定submit事件，覆盖所有提交场景
feedbackForm.addEventListener('submit', sendEmail)

修正说明 #

• 把邮件发送逻辑放到事件处理函数内部，确保只有用户主动提交时才执行
• 通过表单的submit事件触发处理，e.preventDefault()能有效阻止页面刷新
• 修复了元素选择和标签关联的低级错误，保证代码逻辑正常运行

内容的提问来源于stack exchange，提问作者Kaix