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

greglama
March 23, 2023
88 views
3 votes
3 Answers

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.

Tags: html javascript

Answers

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>

- Nicol242PietroOggiano
- March 23, 2023 at 10:44 am
- 0 votes
0
In the javascript code just add
```
const bottone = document.getElementById(“bottone”);
bottone?.addEventListener(“click”,validateFields())
```
Because you need to get the object with id “bottone” and then add an event that, when someone click the button, do something and in this case is run your function.
Login or Signup to reply.

function validateFields(e) {
    e.preventDefault();
    // 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!";
  }

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

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <title>checkbox </title>   
    </head>
    <body>
        <form onsubmit="validateFields(event)">
            <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>

There is some step you have to do:

Apply your validateFields function to html form.
Take the event.
Apply this "e.preventDefault();" code to your JavaScript validateFields Function code.

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers