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

Can I see the changes in Javascript code run in less than a second?

https://github.com/Ahmedalzarka/pod-request-access-landing-page:

let requestBtn = document.getElementById("requestbtn")
let oops = document.querySelector(".oops")

requestBtn.addEventListener("click", () => {
  let emailInput = document.getElementById("email").value
  emailInput == "" ? oops.classList.remove("hidden") : null
})
:root {
  font-size: 10px;
  --font-heading: 5.2em;
  --font-paragraph: 18px;
  --green-color: #54E6AF;
  --form-color: #2C344B;
  --background-navy-blue-color: #121725;
  --white: #ffffff;
  --form-hover-color: #5A668A;
  --grey-color: #C2CBE5;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Chivo', sans-serif;
  font-size: 100%;
}

body {
  position: relative;
  width: 100%;
  height: 100vh;
  padding-bottom: 130px;
  background-color: var(--background-navy-blue-color);
}

body::before {
  width: 100%;
  min-height: 100vh;
  position: absolute;
  content: '';
  background-image: url(../assets/desktop/bg-pattern-dots.svg), url(../assets/desktop/image-host.jpg);
  background-repeat: no-repeat;
  background-position: right bottom 10%, right center;
}

body::after {
  width: 100%;
  min-height: 100vh;
  position: absolute;
  content: '';
  background-image: url(../assets/desktop/logo.svg);
  background-repeat: no-repeat;
  background-position: left 20% top 10%;
}

main {
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-40%);
  max-width: fit-content;
  padding: 90px 60px 0 0;
  background-color: var(--background-navy-blue-color);
}

.container {
  display: flex;
  flex-direction: column;
}

main h1 {
  font-size: 5.2em;
  font-weight: 400;
  line-height: 62px;
  text-transform: uppercase;
  color: var(--green-color);
}

main h1 span {
  color: var(--grey-color);
}

main p {
  max-width: 445px;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--grey-color);
  opacity: 0.5;
  margin-top: 24px;
}

form {
  margin-top: 40px;
  position: relative;
  width: 430px;
}

input {
  width: 100%;
  padding: 20px 0 20px 32px;
  background-color: var(--form-color);
  border: none;
  outline: none;
  border-radius: 1000px;
  font-size: 14px;
  font-weight: 400;
  color: white;
}

input::placeholder {
  color: white;
  font-size: 14px;
  font-weight: 400;
}

button {
  color: black;
  height: 80%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  padding: 10px 28px;
  border-radius: 1000px;
  border: none;
  cursor: pointer;
  background-color: var(--green-color);
  font-size: 14px;
  font-weight: 400;
}

button:hover {
  background-color: #B3FFE2;
}

.img-contianer {
  margin-top: 42px;
  display: flex;
  gap: 40px;
}

.img-contianer img {
  object-fit: contain;
}

.oops {
  color: #FB3E3E;
  opacity: 1;
  margin: 0;
}

.hidden {
  opacity: 0;
}

@media (max-width: 1250px) {
  body::after {
    background-size: 200px;
    background-position: left 40px top 50px;
  }
  body::before {
    background-image: url(../assets/desktop/bg-pattern-dots.svg), url(../assets/tablet/image-host.jpg);
    background-position: left 5% bottom, right top;
  }
  main {
    left: 0;
  }
  main h1 {
    font-size: 48px;
  }
}

@media (max-width: 800px) {
  body::after {
    background-position: center top 10%;
    opacity: 1;
  }
  body::before {
    background-image: url(../assets/mobile/image-host.jpg);
    background-position: top center;
    background-size: cover;
    backface-visibility: hidden;
    opacity: 0.1;
  }
  main {
    width: 100%;
    max-width: 100%;
    padding: 0 24px;
    background-color: transparent;
    bottom: 0;
  }
  main h1 {
    text-align: center;
  }
  main p {
    text-align: center;
  }
  .container {
    align-items: center;
  }
  .img-contianer {
    order: 2;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0.8;
    margin-top: 30px;
  }
  form {
    order: 3;
  }
  button {
    width: 100%;
    position: static;
    padding: 20px 0;
    margin-top: 16px;
    transform: translate(0, 0);
  }
}
<main>
  <h1>Publish your podcasts<br><span>everywhere</span>.</h1>
  <div class="container">
    <p>Upload your audio to Pod with a single click. We’ll then distribute your podcast to Spotify, Apple Podcasts, Google Podcasts, Pocket Casts and more!</p>
    <form>
      <input type="email" placeholder="Email address" id="email">
      <button id="requestbtn">Request Access</button>
    </form>
    <p class="oops hidden">Oops! Please check your email</p>
    <div class="img-contianer">
      <img src="assets/desktop/spotify.svg" alt="spotify">
      <img src="assets/desktop/apple-podcast.svg" alt="apple-podcast">
      <img src="assets/desktop/google-podcasts.svg" alt="google">
      <img src="assets/desktop/pocket-casts.svg" alt="pocket">
    </div>
  </div>
</main>

enter image description here

enter image description here

The hidden message "oops….." shows and hides in the same second.

I don’t know what to do.

Tags:

3

Answers


  1. 0

    When you are using a form tag, u need to be careful to the buttons, cause by default in a form they are type="submit", and this cause the page to refresh every time they are clicked.

    To fix the problem just specify the button type like so:

    <button type="button" id="requestbtn">Request Access</button>

    Hope it helps 🙂

    Login or Signup to reply.
  2. 0
    1. The button missing the type attribute won’t know to submit the form when button is clicked.
    <button type="submit" id="requestbtn">Request Access</button>

    1. To account for button pressed or user pressing enter on the email field, suggestion to add event listener to form.

    2. To prevent form submission on error, use event.preventDefault()

    const requestAccessForm = document.getElementById("requestAccessForm");
let requestBtn = document.getElementById("requestbtn");
let oops = document.querySelector(".oops")


requestAccessForm.addEventListener("submit", (event) => {
  let emailInput = document.getElementById("email");
  
  if (emailInput.value === "") {
    oops.classList.remove("hidden");
    
    console.log("invalid email");
    // Will prevent form from submitting
    event.preventDefault();
    
  } else {
    // else statement just for testing
    console.log("form will submit");
  }
});

    const requestAccessForm = document.getElementById("requestAccessForm");
let requestBtn = document.getElementById("requestbtn");
let oops = document.querySelector(".oops")


requestAccessForm.addEventListener("submit", (event) => {
  let emailInput = document.getElementById("email");
  
  if (emailInput.value === "") {
    oops.classList.remove("hidden");
    
    console.log("invalid email");
    // Will prevent form from submitting
    event.preventDefault();
    
  } else {
    // else statement just for testing
    console.log("form will submit");
  }
});
    :root {
  font-size: 10px;
  --font-heading: 5.2em;
  --font-paragraph: 18px;
  --green-color: #54E6AF;
  --form-color: #2C344B;
  --background-navy-blue-color: #121725;
  --white: #ffffff;
  --form-hover-color: #5A668A;
  --grey-color: #C2CBE5;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Chivo', sans-serif;
  font-size: 100%;
}

body {
  position: relative;
  width: 100%;
  height: 100vh;
  padding-bottom: 130px;
  background-color: var(--background-navy-blue-color);
}

body::before {
  width: 100%;
  min-height: 100vh;
  position: absolute;
  content: '';
  background-image: url(../assets/desktop/bg-pattern-dots.svg), url(../assets/desktop/image-host.jpg);
  background-repeat: no-repeat;
  background-position: right bottom 10%, right center;
}

body::after {
  width: 100%;
  min-height: 100vh;
  position: absolute;
  content: '';
  background-image: url(../assets/desktop/logo.svg);
  background-repeat: no-repeat;
  background-position: left 20% top 10%;
}

main {
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-40%);
  max-width: fit-content;
  padding: 90px 60px 0 0;
  background-color: var(--background-navy-blue-color);
}

.container {
  display: flex;
  flex-direction: column;
}

main h1 {
  font-size: 5.2em;
  font-weight: 400;
  line-height: 62px;
  text-transform: uppercase;
  color: var(--green-color);
}

main h1 span {
  color: var(--grey-color);
}

main p {
  max-width: 445px;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--grey-color);
  opacity: 0.5;
  margin-top: 24px;
}

form {
  margin-top: 40px;
  position: relative;
  width: 430px;
}

input {
  width: 100%;
  padding: 20px 0 20px 32px;
  background-color: var(--form-color);
  border: none;
  outline: none;
  border-radius: 1000px;
  font-size: 14px;
  font-weight: 400;
  color: white;
}

input::placeholder {
  color: white;
  font-size: 14px;
  font-weight: 400;
}

button {
  color: black;
  height: 80%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  padding: 10px 28px;
  border-radius: 1000px;
  border: none;
  cursor: pointer;
  background-color: var(--green-color);
  font-size: 14px;
  font-weight: 400;
}

button:hover {
  background-color: #B3FFE2;
}

.img-contianer {
  margin-top: 42px;
  display: flex;
  gap: 40px;
}

.img-contianer img {
  object-fit: contain;
}

.oops {
  color: #FB3E3E;
  opacity: 1;
  margin: 0;
}

.hidden {
  opacity: 0;
}

@media (max-width: 1250px) {
  body::after {
    background-size: 200px;
    background-position: left 40px top 50px;
  }
  body::before {
    background-image: url(../assets/desktop/bg-pattern-dots.svg), url(../assets/tablet/image-host.jpg);
    background-position: left 5% bottom, right top;
  }
  main {
    left: 0;
  }
  main h1 {
    font-size: 48px;
  }
}

@media (max-width: 800px) {
  body::after {
    background-position: center top 10%;
    opacity: 1;
  }
  body::before {
    background-image: url(../assets/mobile/image-host.jpg);
    background-position: top center;
    background-size: cover;
    backface-visibility: hidden;
    opacity: 0.1;
  }
  main {
    width: 100%;
    max-width: 100%;
    padding: 0 24px;
    background-color: transparent;
    bottom: 0;
  }
  main h1 {
    text-align: center;
  }
  main p {
    text-align: center;
  }
  .container {
    align-items: center;
  }
  .img-contianer {
    order: 2;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0.8;
    margin-top: 30px;
  }
  form {
    order: 3;
  }
  button {
    width: 100%;
    position: static;
    padding: 20px 0;
    margin-top: 16px;
    transform: translate(0, 0);
  }
}
    <main>
  <h1>Publish your podcasts<br><span>everywhere</span>.</h1>
  <div class="container">
    <p>Upload your audio to Pod with a single click. We’ll then distribute your podcast to Spotify, Apple Podcasts, Google Podcasts, Pocket Casts and more!</p>
    <form id="requestAccessForm">
      <input type="email" placeholder="Email address" id="email">
      <button type="submit" id="requestbtn">Request Access</button>
    </form>
    <p class="oops hidden">Oops! Please check your email</p>
    <div class="img-contianer">
      <img src="assets/desktop/spotify.svg" alt="spotify">
      <img src="assets/desktop/apple-podcast.svg" alt="apple-podcast">
      <img src="assets/desktop/google-podcasts.svg" alt="google">
      <img src="assets/desktop/pocket-casts.svg" alt="pocket">
    </div>
  </div>
</main>
    Login or Signup to reply.
  3. 0

    As Edoardo Balducci mentions, buttons are type="submit" by default. This means, clicking the button will try to submit its associated form.

    Since the input field is not required, it is optional. Because it is the form’s only form control, the form is always valid and will always submit when requested (here: clicking the button).

    To prevent submission, try (one of) the following:

    • Make the input field required.
    • Conditionally prevent the click from submitting the form (by calling event.preventDefault()).
    • Change the button to type="button", and conditionally submit the form manually (e.g. by calling form.requestSubmit())

    As Arty.Simon mentions, it would be better to listen to a submit event on the form. This better conveys intent and also handles form submission requests originating from elsewhere than the button.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search