Remove text from placeholder after submit witj JavaScript

user_19325986 0
Viewed 49

After refiling the placeholders "Din Navn, Din email, Din besked" with the necessary text and pressing submit "Send besked" button, text inside placeholders stays. I am trying to get the text in placeholders to go back to show the original text (remove the necessary text I put there before), but I am struggling to do it. Is there like a quick function to do that?

Here is the code

const nameInput = document.querySelector("#name");
const email = document.querySelector("#email");
const message = document.querySelector("#message");
const success = document.querySelector("#success");
const errorNodes = document.querySelectorAll(".error");

function validateForm() {

  clearMessage();
  let errorFlag = false;

  if (nameInput.value.length < 1) {
    errorNodes[0].innerText = "Dette felt skal udfyldes";
    nameInput.classList.add("error-border");
    errorFlag = true;
  }
  if (!emailIsValid(email.value)) {
    errorNodes[1].innerText = "Indtast venligst en gyldig email adresse";
    email.classList.add("error-border");
    errorFlag = true;

  }

  if (message.value.length < 1) {
    errorNodes[2].innerText = "Dette felt skal udfyldes";
    message.classList.add("error-border");
    errorFlag = true;

  }

  if (!errorFlag) {
    success.innerText = "Tak, din besked er modtaget";

  } else {
    success.innerText = "Udfyldt venligst felterne"
  }
}

function clearMessage() {
  for (let i = 0; i < errorNodes.length; i++) {
    errorNodes[i].innerText = "";
  }


  nameInput.classList.remove("error-border");
  email.classList.remove("error-border");
  message.classList.remove("error-border");

}


function emailIsValid(email) {
  let pattern = /\S+@\S+\.\S+/;
  return pattern.test(email);
}
<div id="overlay">
  <form onsubmit="event.preventDefault(); validateForm()" class="formtilgrid">
    <h2>Kontakt Schneider Electric</h2>

    <label for="name">Navn:</label>
    <input type="text" id="name" placeholder="Dit navn">
    <small class="error"></small>

    <label for="email">Email:</label>
    <input type="text" id="email" placeholder="Din email">
    <small class="error"></small>

    <label for="message">Besked:</label>
    <textarea id="message" placeholder="Din besked" rows="6"></textarea>
    <small class="error"></small>

    <div id="center">
      <input type="submit" value="Send besked">
      <p id="success"></p>
    </div>
  </form>
</div>

javascript
1 Answers

Try this, I added a function deleteValue(); to detect for a click on the submit button, once the function is triggered, the value of all the original input boxes is set to its original placeholder value after one second from the setTimeout();

    const nameInput = document.querySelector("#name");
const email = document.querySelector("#email");
const message = document.querySelector("#message");
const success = document.querySelector("#success");
const errorNodes = document.querySelectorAll(".error");

function validateForm() {

clearMessage();
let errorFlag = false;

if (nameInput.value.length < 1) {
    errorNodes[0].innerText = "Dette felt skal udfyldes";
    nameInput.classList.add("error-border");
    errorFlag = true;
}
if (!emailIsValid(email.value)) {
    errorNodes[1].innerText = "Indtast venligst en gyldig email adresse";
    email.classList.add("error-border");
    errorFlag = true;

}

if (message.value.length < 1) {
    errorNodes[2].innerText = "Dette felt skal udfyldes";
    message.classList.add("error-border");
    errorFlag = true;

}

if (!errorFlag) {
    success.innerText = "Tak, din besked er modtaget";

} else {
    success.innerText = "Udfyldt venligst felterne"
}
}

function clearMessage() {
for (let i = 0; i < errorNodes.length; i++) {
    errorNodes[i].innerText = "";
}


nameInput.classList.remove("error-border");
email.classList.remove("error-border");
message.classList.remove("error-border");

}


function emailIsValid(email) {
let pattern = /\S+@\S+\.\S+/;
return pattern.test(email);
}

function deleteValue() {

setTimeout(function click(){
    document.getElementById("name").value = "";
document.getElementById("email").value = "";
document.getElementById("message").value = "";

}, 1000)};
   

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div id="overlay">
        <form onsubmit="event.preventDefault(); validateForm()" class="formtilgrid">
            <h2>Kontakt Schneider Electric</h2>

            <label for="name">Navn:</label>
            <input type="text" id="name" placeholder="Dit navn">
            <small class="error"></small>

            <label for="email">Email:</label>
            <input type="text" id="email" placeholder="Din email">
            <small class="error"></small>

            <label for="message">Besked:</label>
            <textarea id="message" placeholder="Din besked" rows="6"></textarea>
            <small class="error"></small>

            <div id="center">
                <input onclick = "deleteValue();" id = "btn" type="submit" value="Send besked">
                <p id="success"></p>
            </div>
        </form>


    </div>
    </body>
</html>

Hope this worked for you...

user_136212430
Related