发送电子邮件的通知消息

Question

我目前正在构建一个使用formspree.io api 向我的电子邮件发送消息的表单，但我不明白所写的js。我基本上想让它在发送表单时显示#status 错误或成功消息。表单有效，但未显示消息

<div class="contact">
        <div class="contact-content">
            <div class="close">
                <i class="fa fa-times" aria-hidden="true"></i>
            </div>
            <form action="https://formspree.io/f/xyylbnle" method="POST" id="contact-form">
                <div class="form-group">
                    <input type="text" id="full-name" name="full-name" placeholder="Full Name" required> 
                </div>
                <div class="form-group">
                    <input type="email" id="email" name="email" placeholder="Email" required> 
                </div>
                <div class="form-group">
                    <textarea id="message" name="message" cols="40" rows="5" placeholder="Send a message!" required></textarea> 
                </div>
                <button class="primary-button submit">
                    Send
                </button>
            </form>
            
        </div>
        <div id="status" class="success">
            Sent Successfully
        </div>
    </div>

这是formpree给我的javascript

 var form = document.getElementById("my-form");
    
    async function handleSubmit(event) {
      event.preventDefault();
      var status = document.getElementById("my-form-status");
      var data = new FormData(event.target);
      fetch(event.target.action, {
        method: form.method,
        body: data,
        headers: {
            'Accept': 'application/json'
        }
      }).then(response => {
        status.innerHTML = "Thanks for your submission!";
        form.reset()
      }).catch(error => {
        status.innerHTML = "Oops! There was a problem submitting your form"
      });
    }
    form.addEventListener("submit", handleSubmit)

这是我为使表单工作而编辑的内容：

var form = document.getElementById("contact-form");
    
    async function handleSubmit(event) {
        event.preventDefault();
      var status = document.getElementById("status");
      var data = new FormData(event.target);
      fetch(event.target.action, {
        method: form.method,
        body: data,
        headers: {
            'Accept': 'application/json'
        }
      }).then(success => {
        status.classList.add('success')
        status.innerHTML = "Successfully Sent";
        form.reset()
      }).catch(error => {
        status.classList.add('error')
        status.innerHTML = "Error"
      });
    }
    form.addEventListener("submit", handleSubmit)

这是我第一次使用 API

Answer 1

查看以下几行：

var status = document.getElementById("my-form-status");
...
status.innerHTML = "Thanks for your submission!";

代码需要具有id 的#my-form-status 的元素。看起来您已使用仅#status 的id 编写了您的状态元素持有者，因此代码将找不到任何匹配的元素并且不会按预期工作。

顺便说一句，我很惊讶表单能像你说的那样工作。您发布的JS中的第一行是：

var form = document.getElementById("my-form");

但您的表单id 是#contact-form。看起来那些应该匹配。