Javascript 如何添加一个“；“已发送电子邮件”；提交后表单下的元素？

我正在用html制作一个邮件表单，将值提交到php sendmail文件。当我提交表单Id时，我像一个小盒子一样弹出，我在其他网站上看到过它，但我自己却不知道怎么做。我的表单如下所示：

<form action="mail.php" method="POST">
            <input type="text" id="name" name="Name" placeholder="Namn" required /><br />
            <input type="text" id="email" name="TheEmail" placeholder="E-Mail" required /><br />
            <input type="text" id="phone" name="Phone" placeholder="Telefon" required /><br />
            <textarea id="message" name="Message" placeholder="Message" rows="8" cols="80" required></textarea><br />
            <button class="form-button" type="button" id="send-email">Send</button>
            <span id="response"></span>
        </form>

用于与后端服务器通信（发送数据）

在发送数据时，您可以禁用该按钮，以便用户不会再次发送新请求

从服务器接收数据后，相应地显示消息

您可以在这里阅读有关如何使用发送数据到PHP服务器的模式

演示：

const btn=document.querySelector（“发送电子邮件”）；
btn.addEventListener（“单击”，发送数据到备份）；
函数sendDataToBackEnd（）{
//编写代码将数据发送到后端服务。
btn.textContent=“处理..”；
btn.setAttribute（“禁用”，真）；
设置超时（（）=>{
document.getElementById（“响应”）.textContent=“已发送电子邮件”；
}, 2000);
}

发送

const btn=document.querySelector（“发送电子邮件”）；
btn.addEventListener（“单击”，发送数据到备份）；
函数sendDataToBackEnd（）{
//编写代码将数据发送到后端服务。
btn.textContent=“处理..”；
btn.setAttribute（“禁用”，真）；
设置超时（（）=>{
document.getElementById（“响应”）.textContent=“已发送电子邮件”；
}, 2000);
}

发送

fyi，

是错误的。通过AJAX提交表单，在Javascript中处理结果/成功。我收到以下错误“Uncaught TypeError:Cannot read property'addEventListener'of null at scripts.js:3”@MaxK123请更新问题中的代码，以便找出错误。我现在已将主要问题更新为所用代码代码代码代码代码代码工作正常，您是否将

scripts.js

放在HTML代码之后？我的意思是在

主体

标记关闭之前@MaxK123//标题标签lile meta和title标签的内容//您的HTML代码@MaxK123这就是结构应该是什么样子，如果您将

放在标题标签中，那么它将不起作用。

const btn = document.querySelector("#send-email");

btn.addEventListener("click", sendDataToBackEnd);

function sendDataToBackEnd() {
    //Write code to send data to your back end service.

    btn.textContent = "Processing..";
    btn.setAttribute("disable", true);
    setTimeout(() => {
        document.getElementById("response").textContent = "Email Sent";
    }, 2000);
}