How to add a "Email sent" element under form after submitting?

user_12628376 0
Viewed 61

I am making a mail form in html that submitts values to a php sendmail file. When I submitt the form Id like a little box to popup, Ive seen it on other websites but cannot figure out how to do it myself. My form looks like this :

<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>

JS:

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);
}
web css html php javascript
2 Answers

Use AJAX to communicate(send data) with your backend server.

While that data is sending, you can disable the button, so that no new request is being sent by the user again.

After you receive data from the server, display the message accordingly.

You can read here mode about how to send data using fetch API to PHP server

Demo:

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);
}
<form>

  <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" /><br required />
  <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>
  <br><br>
  <span id="response"></span>
</form>
  <br><br>

Note: There is an error in your HTML code. equired>/textarea><br />, you are missing the < to close the textarea tag

user_119269700 

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);
}
<form>

  <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" /><br required />
  <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>
  <br><br>
  <span id="response"></span>
</form>
  <br><br>

It works! Thanks!

user_126283760
Related