Question 189730 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – When I submit my form, it refreshes, overriding my preventdefault() method. I can't fix it

I initially had it working, but when I added the dark mode toggle, it began to read the dark mode toggle as a submit event, and would change the colour of the beer bottle and display the enter/Don’t come in message as if the user were submitting the Check if you’re allowed in button.

So I changed my event handler to only do on submit for the specific input that checks if you’re allowed, I gave it the id checkAllowed. Now when I try to hit that submit input, the whole page refreshes.

This will probably be the last code I write as I have grown to despise the field of programming within 3 short weeks. I am going to setup a meeting with my counsellor & in the meantime, I will drink heavily to resist the urge to disassemble my laptop into it’s component atoms via sheer rage.

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="../style/css/ladInThePub.css" />
      <script src="../script/ladInThePub.js" defer></script>
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
      <link
          href="https://fonts.googleapis.com/css2?family=Anton&family=Open+Sans:wght@300;400&display=swap"
          rel="stylesheet"
      />
      <title>Lad in the pub</title>
  </head>

  <body>
      <h1>Lad in the pub</h1>
      <div class="container">
          <p id="subTitle">Will you have a beer tonight?</p>
          <img id="beer-bottle" src="../assets/beer.svg" />
          <form class="form">
            <button id="darkToggle">Dark mode</button>
            <label for="age">How old are you?</label>
            <input
                type="number"
                id="age"
                name="age"
                min="0"
                max="120"
                placeholder="Enter your age"
                required
            />
            <label>What country are you in?</label>
            <select
                id="country"
                name="country"
                placeholder="Select a country"
                required
            >
                <option value="Australia">Australia</option>
                <option value="Poland">Poland</option>
                <option value="UK">UK</option>
                <option value="USA">USA</option>
            </select>
            <label for="drunk">How drunk are you?</label>
            <input
                placeholder="Enter a number between 0 and 5"
                type="number"
                id="drunk"
                name="drunk"
                min="0"
                max="5"
                required
            />
            <input
                id="allowedCheck"
                type="submit"
                value="Check if you're allowed in"
            />
          </form>
          <div id="messageTxt" class="message">
            
          </div>
      </div>
  </body>
</html>

* {
  font-family: "Open Sans", sans-serif;
}

body{
  // Light mode background colour
  background-color: white;
  // Light mode text colour.
  color: black;

  &.body-dark-mode {
    background-color: black;
    color: white;
  }
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

p{
  font-size: 25px;
}

h1 {
  font-family: "Anton", sans-serif;
  font-size: 66px;
  text-align: center;
  margin-bottom: 0;
}

img {
  height: 200px;
  margin-bottom: 50px;
}

label {
  font-size: 20px;
  margin-bottom: 5px;
}

input,
select {
  border: 2px solid black;
  border-radius: 8px;
  font-size: 20px;
  padding: 6px;
  margin-bottom: 15px;
}

#allowedCheck {
  background-color: #ffbd4a;
  font-size: 20px;
  font-weight: bold;
  padding: 15px 30px;
  border: none;
  border-radius: 8px;
  margin-top: 20px;
}

.form {
  display: flex;
  flex-direction: column;
  padding: 60px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  border-radius: 12px;
  width: 400px;

  &.form-dark-mode{
    box-shadow: rgba(255, 255, 255) 0px 1px 4px;
  }

  #darkToggle{
    background-color: #ffbd4a;
    font-size: 20px;
    font-weight: bold;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    margin-bottom: 20px;
  }
}

.message {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  border-radius: 12px;
  width: 250px;
  margin: 20px 0px 20px 0px;

  &.message-dark-mode{
    box-shadow: rgba(255, 255, 255) 0px 1px 4px;
  }

  &--success {
      background-color: #008000;
      color: white;
  }

  &--failure {
      background-color: #b40f0f;
      color: white;
  }
}

#messageTxt {
  color: black;
  p {
    text-align: center;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 36px;
    font-weight: 900;
  }
}

// get the button element by id.
let button = document.getElementById("darkToggle");

// add a click event listener to the button.
button.addEventListener("click", function () {
  // toggle the dark-mode class on the body and button elements.
  document.body.classList.toggle("body-dark-mode");
  document.querySelector(".form").classList.toggle("form-dark-mode");
  document.querySelector(".message").classList.toggle("message-dark-mode");

  // check if the body element has the dark-mode class.
  if (document.body.classList.contains("body-dark-mode")) {
    // change the button text to light mode.
    button.textContent = "Light mode";
  } else {
    // change the button text to dark mode.
    button.textContent = "Dark mode";
  }
});

document.getElementById("allowedCheck").onsubmit = (event) => {
  event.preventDefault();
  document.getElementById("messageTxt").innerHTML = "";
  if(document.querySelector("#drunk").value < 2 && document.querySelector("#age").value >= 18){
    document.getElementById("beer-bottle").src="../assets/green_beer.svg";
    let ageOK = document.getElementById("messageTxt");
    let p = document.createElement("p");
    p.innerText = "Please come in.";
    ageOK.appendChild(p);
  }else if(document.querySelector("#drunk").value >= 2){
    document.getElementById("beer-bottle").src="../assets/red_beer.svg";
    let inebriated = document.getElementById("messageTxt");
    let p = document.createElement("p");
    p.innerText = "Sorry, we have a legal obligation not to serve intoxicated persons.";
    inebriated.appendChild(p);
  }else if(document.querySelector("#age").value < 18) {
    document.getElementById("beer-bottle").src="../assets/red_beer.svg";
    let ageTooYoung = document.getElementById("messageTxt");
    let p = document.createElement("p");
    p.innerText = "Sorry, you are too young to enter.";
    ageTooYoung.appendChild(p);
  }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So Bing AI chat solved my conundrum.

    It turns out that there is a super simple way to stop a button, or, I assume, multiple buttons within a form, from triggering an onsubmit event, and refreshing the entire form.

    You simply find any button, within the form, that you don't wish to trigger an onsubmit event, and give it the attribute type="button". Any element with a type of "button", doesn't submit the form. Only a type of "submit" will submit the form.

    The solution was, quite frankly, irritatingly logical.


  2. 0

    There are two solutions to your problem:

    If you want to stop the ‘Dark mode’ button from submiting the form you could simply move it from inside the <form> to above the <form> container. That way there is no way for a button to sumbit the form.

    You have preventDefault only for the last button in the form, so obviously it works only for that button. So you could just add preventDefault() method to the ‘darkToggle’ event listener like this:

    let button = document.getElementById("
button.addEventListener("click", function (e) {
    e.preventDefault();
    ...some code here
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search