Display thank you section after submitting credit card form via JS-CodePudding

I try to develop credit card payment form through using pure CSS and Vanilla JS. Almost, It is done. After submitting the form, thank you section supposed to be displayed, however, it does not work. That section has created by using JS. I do not get it what I am missing. In addition, despite using prevent default, it continues to refresh the page.

Also, after clicking submit button, I want to show alert if input is string rather than number or vice versa. I did not use input number because of the pattern issue. How can I solve it?

Thank you for taking the time.

const holderName = document.querySelector("#name")
const cardNumber = document.querySelector("#card-number");
const cardMonth = document.querySelector("#month")
const cardYear = document.querySelector("#year")
const cvcNumber = document.querySelector("#cvc")
const form = document.querySelector("#form")
const submitBtn = document.querySelector("#submit")

const displayedName = document.querySelector(".displayed-name")
const displayedNumber = document.querySelector(".displayed-number")
const displayedMonth = document.querySelector(".displayed-month")
const displayedYear = document.querySelector(".displayed-year")
const displayedCvc = document.querySelector(".displayed-cvc")




holderName.oninput = () => {
    displayedName.textContent = holderName.value.toUpperCase();
}

cardNumber.oninput = () => {
    
    displayedNumber.textContent = cardNumber.value.replace(/[^0-9] /gi, '').replace(/(.{4})/g, '$1 ');

}

cardMonth.oninput = () => {
    displayedMonth.textContent = cardMonth.value.replace(/[^0-9] /gi, "")
}

cardYear.oninput = () => {
    displayedYear.textContent = cardYear.value.replace(/[^0-9] /gi, "");
}

cvcNumber.oninput = () => {
    displayedCvc.textContent = cvcNumber.value.replace(/[^0-9] /gi, "")
}

submitBtn.addEventListener("submit", (e) => {
    e.preventDefault()

    ThankYouDisplay()

    form.classList.add("hidden");
})

function ThankYouDisplay () {
    const main = document.querySelector("main")

    const thankSection = document.createElement("section");
    thankSection.classList.add("thank-you")
    main.appendChild(thankSection)

    const thanksDIV = document.createElement("div")
    thanksDIV.classList.add("thank-you-wrapper")
    thankSection.appendChild(thanksDIV)
    
    const imgComplete = document.createElement("img");
    imgComplete.src = "images/icon-complete.svg";
    imgComplete.alt = "complete icon"
    thanksDIV.appendChild(imgComplete);

    const thankYouHeader = document.createElement("h3");
    thankYouHeader.textContent = "THANK YOU";
    thanksDIV.appendChild(thankYouHeader);

    const thankYouText = document.createElement("p");
    thankYouText.textContent = "We've added your card details";
    thanksDIV.appendChild(thankYouText);

    const continueBtn = document.createElement("button");
    continueBtn.textContent = "Continue";
    thanksDIV.appendChild(continueBtn);
}

Hidden class involves display: none;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <title>Frontend Mentor | Interactive card details form</title>
  <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=Space Grotesk&display=swap" rel="stylesheet">
  <script src="credit-card.js" defer></script>
</head>
<body>
  <main>
    <section >
      <aside>
        <img id="background-img" src="images/bg-main-desktop.png" alt="background-for-desktop">
      </aside>
    </section>

    <section >
      <div >
        <img src="images/card-logo.svg" alt="">
      </div>

      <div >
        <span>0000 0000 0000 0000</span>
      </div>

      <div >
        <span >Jonathan</span>
        <div>
          <span >00</span>
          <span>/</span>
          <span >00</span>
        </div>
      </div>
      
    </section>

    <section >
      <span >000</span>
    </section>

    <!-- <section >
      <div >
        <img src="images/icon-complete.svg" alt="">
        <h3>THANK YOU!</h3>
        <p>We've added your card details</p>
        <button>Continue</button>
      </div>
    </section> -->

    <section >
      <div >
        <form id="form">
          <label for="name">CARDHOLDER NAME</label>
          <input type="text" name="name" id="name" maxlength="25" required>
          <label for="card-number">CARD NUMBER</label>
          <input type="text" name="card-number" id="card-number" autocomplete="cc-number" maxlength="16" placeholder="xxxx xxxx xxxx xxxx" required>
          <div >
            <div >
                <label for="month">DATE</label>
                <div >
                  <input type="text" name="month" id="month" maxlength="2" placeholder="month" required>
                  <input type="text" name="year" id="year" maxlength="2" placeholder="year" required>
                </div>
            </div>
            <div >
              <label for="cvc">CVC</label>
              <div >
                 <input type="text" name="cvc" id="cvc" maxlength="3" minlength="3" required>
              </div>
            </div>
          </div>
       
          <button id="submit" type="submit">Confirm</button>
        </form>
      </div>
    </section>
  </main>
</body>
</html>

CodePudding user response：

The submit should be on the form not on the submission button.

const holderName = document.querySelector("#name")
const cardNumber = document.querySelector("#card-number");
const cardMonth = document.querySelector("#month")
const cardYear = document.querySelector("#year")
const cvcNumber = document.querySelector("#cvc")
const form = document.querySelector("#form")
const submitBtn = document.querySelector("#submit")

const displayedName = document.querySelector(".displayed-name")
const displayedNumber = document.querySelector(".displayed-number")
const displayedMonth = document.querySelector(".displayed-month")
const displayedYear = document.querySelector(".displayed-year")
const displayedCvc = document.querySelector(".displayed-cvc")




holderName.oninput = () => {
    displayedName.textContent = holderName.value.toUpperCase();
}

cardNumber.oninput = () => {
    
    displayedNumber.textContent = cardNumber.value.replace(/[^0-9] /gi, '').replace(/(.{4})/g, '$1 ');

}

cardMonth.oninput = () => {
    displayedMonth.textContent = cardMonth.value.replace(/[^0-9] /gi, "")
}

cardYear.oninput = () => {
    displayedYear.textContent = cardYear.value.replace(/[^0-9] /gi, "");
}

cvcNumber.oninput = () => {
    displayedCvc.textContent = cvcNumber.value.replace(/[^0-9] /gi, "")
}

form.addEventListener("submit", (e) => {
    e.preventDefault()

    ThankYouDisplay()

    form.classList.add("hidden");
})

function ThankYouDisplay () {
    const main = document.querySelector("main")

    const thankSection = document.createElement("section");
    thankSection.classList.add("thank-you")
    main.appendChild(thankSection)

    const thanksDIV = document.createElement("div")
    thanksDIV.classList.add("thank-you-wrapper")
    thankSection.appendChild(thanksDIV)
    
    const imgComplete = document.createElement("img");
    imgComplete.src = "images/icon-complete.svg";
    imgComplete.alt = "complete icon"
    thanksDIV.appendChild(imgComplete);

    const thankYouHeader = document.createElement("h3");
    thankYouHeader.textContent = "THANK YOU";
    thanksDIV.appendChild(thankYouHeader);

    const thankYouText = document.createElement("p");
    thankYouText.textContent = "We've added your card details";
    thanksDIV.appendChild(thankYouText);

    const continueBtn = document.createElement("button");
    continueBtn.textContent = "Continue";
    thanksDIV.appendChild(continueBtn);
}

.hidden {
  display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <title>Frontend Mentor | Interactive card details form</title>
  <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=Space Grotesk&display=swap" rel="stylesheet">
  <script src="credit-card.js" defer></script>
</head>
<body>
  <main>
    <section >
      <aside>
        <img id="background-img" src="images/bg-main-desktop.png" alt="background-for-desktop">
      </aside>
    </section>

    <section >
      <div >
        <img src="images/card-logo.svg" alt="">
      </div>

      <div >
        <span>0000 0000 0000 0000</span>
      </div>

      <div >
        <span >Jonathan</span>
        <div>
          <span >00</span>
          <span>/</span>
          <span >00</span>
        </div>
      </div>
      
    </section>

    <section >
      <span >000</span>
    </section>

    <!-- <section >
      <div >
        <img src="images/icon-complete.svg" alt="">
        <h3>THANK YOU!</h3>
        <p>We've added your card details</p>
        <button>Continue</button>
      </div>
    </section> -->

    <section >
      <div >
        <form id="form">
          <label for="name">CARDHOLDER NAME</label>
          <input type="text" name="name" id="name" maxlength="25" required>
          <label for="card-number">CARD NUMBER</label>
          <input type="text" name="card-number" id="card-number" autocomplete="cc-number" maxlength="16" placeholder="xxxx xxxx xxxx xxxx" required>
          <div >
            <div >
                <label for="month">DATE</label>
                <div >
                  <input type="text" name="month" id="month" maxlength="2" placeholder="month" required>
                  <input type="text" name="year" id="year" maxlength="2" placeholder="year" required>
                </div>
            </div>
            <div >
              <label for="cvc">CVC</label>
              <div >
                 <input type="text" name="cvc" id="cvc" maxlength="3" minlength="3" required>
              </div>
            </div>
          </div>
       
          <button id="submit" type="submit">Confirm</button>
        </form>
      </div>
    </section>
  </main>
</body>
</html>