Submit button not changing text when all fields are validated and clicked

March 23, 2023

Html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <title>checkbox </title>   
    </head>
    <body>
        <form>
            <div>
              <label for="name"><span class="stileTesto">Nome</span></label>
              <input type="text" id="name" name="name" required>
            </div>
            <div>
              <label for="surname"><span class="stileTesto">Cognome:</span></label>
              <input type="text" id="surname" name="surname" required>
            </div>
            <div>
              <label for="email">Email:</label>
              <input type="email" id="email" name="email" required>
            </div>
            <div>
              <label for="comment">Scrivi la tua idea!</label>
              <textarea id="comment" name="comment" required></textarea>
            </div>
            <button  id="bottone" type="submit">Submit</button>
          </form>
    </body>

    <script src="script.js"></script>
</html>

CSS

form {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
  }
  
  label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
  }


  input[type="text"],
  input[type="email"],
  textarea {
    width: 95%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 20px;
    margin-bottom: 20px;
    font-family: Arial, Helvetica, sans-serif;
  }

  textarea[name="comment"] {
    height: 150px;
  }
  
  
  button {
    background-color: orange;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
  }
  
  button[type="submit"]:hover {
    background-color: #f36709;
  }

JavaScript

function validateFields() {
    // Get the values of the input fields
    const name = document.getElementById("name").value.trim();
    const surname = document.getElementById("surname").value.trim();
    const email = document.getElementById("email").value.trim();
    const comment = document.getElementById("comment").value.trim();

    // Check if any fields are empty
    if (name === "" || surname === "" || email === "" || comment == "") {
      alert("Please fill in all fields.");
      return;
    }

    // Check if the email address is valid
    const emailRegex = /\S+@\S+\.\S+/;
    if (!emailRegex.test(email)) {
      alert("Please enter a valid email address.");
      return;
    }

    // If all fields are valid, change the button text to "Thanks!"
    document.querySelector("button").textContent = "Thanks!";
  }

everything is working fine except for that the button isn’t changing from "submit" to "Thank you". I tried changing the type from submit to button but apparently nothing changed.
the text gets submitted correctly but I’d like it to change so it makes it more clear to see that it’s submitted.

>Solution :

Not 100% sure what you want to achive, but I would change the type of your button and then add the event to your submit button.

<button id="bottone" type="button" onclick="validateFields()">Submit</button>

Then you just need to trigger your submit if the conditions are approved. I’ve added the code in the js.

Demo

function validateFields() {
  // Get the values of the input fields
  const name = document.getElementById("name").value.trim();
  const surname = document.getElementById("surname").value.trim();
  const email = document.getElementById("email").value.trim();
  const comment = document.getElementById("comment").value.trim();

  // Check if any fields are empty
  if (name === "" || surname === "" || email === "" || comment == "") {
    alert("Please fill in all fields.");
    return;
  }

  // Check if the email address is valid
  const emailRegex = /\S+@\S+\.\S+/;
  if (!emailRegex.test(email)) {
    alert("Please enter a valid email address.");
    return;
  }

  // If all fields are valid, change the button text to "Thanks!"
  document.querySelector("button").textContent = "Thanks!";
  //document.querySelector("form").submit();
}

form {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
}

label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

input[type="text"],
input[type="email"],
textarea {
  width: 95%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 20px;
  margin-bottom: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

textarea[name="comment"] {
  height: 150px;
}

button {
  background-color: orange;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #f36709;
}

<form>
  <div>
    <label for="name"><span class="stileTesto">Nome</span></label>
    <input type="text" id="name" name="name" required>
  </div>
  <div>
    <label for="surname"><span class="stileTesto">Cognome:</span></label>
    <input type="text" id="surname" name="surname" required>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div>
    <label for="comment">Scrivi la tua idea!</label>
    <textarea id="comment" name="comment" required></textarea>
  </div>
  <button id="bottone" type="button" onclick="validateFields()">Submit</button>
</form>