Input Value type=text returns Empty-CodePudding

Good afternoon all, Im working on one of the frontendmentor.io challenges, and Im having trouble getting my input to register the value in my javascript file.

$(document).ready(function(){
    $(function() {
        var submit = $('#submit');
        submit.click(function(){
            var name = $('#name').val();
            console.log(name);
        });
    });
});

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  font-family: "Space Grotesk", sans-serif;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
}

html, body {
  height: 100%;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
main {
  height: 100%;
  width: 100%;
  display: flex;
  z-index: 5;
}

.sectionOne {
  height: 100%;
  width: 30%;
  background-image: url("../images/bg-main-desktop.png");
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow: visible;
  background-repeat: no-repeat;
  background-size: cover;
}

.firstCard, .secondCard {
  padding: 20px 0 20px 0;
  height: 275px;
  width: 450px;
  z-index: 6;
  border-radius: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.firstCard {
  margin-left: 200px;
  background-image: url("../images/bg-card-front.png");
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}

.secondCard {
  margin-left: 400px;
  background-image: url("../images/bg-card-back.png");
  display: flex;
  align-items: center;
  justify-content: center;
}

.cardLogo {
  margin-left: 30px;
  margin-top: 20px;
}

.cardNo {
  color: white;
  font-size: 18px;
  letter-spacing: 2px;
  margin-left: 30px;
  margin-top: 80px;
}

.cardInfo {
  margin-left: 30px;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
}

.name, .date, .cvc {
  color: white;
  font-size: 16px;
  letter-spacing: 1px;
}

.cvc {
  margin-left: 300px;
}

.sectionTwo {
  height: 100%;
  width: 70%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

form {
  height: 325px;
  width: 300px;
  margin-left: 275px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}

form > *:not(button) {
  padding-bottom: 10px;
}

label {
  text-transform: uppercase;
  color: black;
  font-size: 12px;
}

input {
  height: 45px;
  width: 300px;
  border-radius: 8px;
  border: 1.5px solid gray;
  background-color: white;
  text-indent: 10px;
}

input[type=text]::placeholder {
  color: gray;
}

.multiBox {
  height: 100px;
  width: 300px;
  display: flex;
  justify-content: space-between;
}

.multiBox input {
  text-transform: uppercase;
}

.inputX2 {
  width: 60px;
}

.inputX3 {
  width: 150px;
}

button {
  color: white;
  font-size: 18px;
  width: 300px;
  border-radius: 10px;
  background-color: hsl(278deg, 68%, 11%);
  border: none;
  cursor: pointer;
  height: 45px;
  margin-top: -25px;
}

@media screen and (max-width: 870px) {
  main {
    flex-direction: column;
  }
  .sectionOne {
    height: 30%;
    width: 100%;
    display: block;
  }
  .sectionOne {
    z-index: 8;
  }
  .firstCard, .secondCard {
    height: 140px;
    width: 200px;
    margin-left: 0;
  }
  .sectionTwo {
    height: 70%;
    width: 100%;
    z-index: 6;
  }
  form {
    margin-left: 0;
  }
}
@media screen and (max-width: 425px) {
  .firstCard {
    margin: 100px 0 0 50px !important;
  }
  .secondCard {
    margin: -200px 0 0 100px !important;
  }
}
@media screen and (max-width: 870px) {
  .firstCard {
    margin: 0 auto;
    margin-top: 80px;
    margin-left: 35%;
  }
  .secondCard {
    margin: 0 auto;
    margin-top: -200px;
    margin-left: 40%;
  }
}

/*# sourceMappingURL=styles.css.map */

<!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">
  
  <title>Frontend Mentor | Interactive card details form</title>
  <link rel="stylesheet" href="css/styles.css">
  <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:wght@500&display=swap" rel="stylesheet"> 
</head>
<body>

  <main>
      <div >
        <div  src="images/bg-card-front.png" alt="cardFront">
        <!-- <img  src="images/card-logo.svg" alt="cardLogo">
        <div >0000 0000 0000 0000</div>
        <div >
          <div >Jane Appleseed</div>
          <div >00/00</div>
        </div> -->
      </div>
      <div  src="images/bg-card-back.png" alt="cardBack">
        <!-- <div >XXX</div> -->
      </div>
    </div>
    <div >
      <form action="#">
        <div>
          <label for="name" >Cardholder Name</label><br>
          <input id="wholeName" type="text" placeholder="Your Name Here"> 
        </div>

        <div>
          <label for="card number" >Card Number</label><br>
          <input type="text" placeholder="0000 0000 0000 0000"> 
        </div>

        <div >
          <div>
            <label for="card date">exp. date (mm/yy)</label><br>
            <input  type="text" placeholder="mm"> 
            <input  type="text" placeholder="YY">
          </div>
          <div>
            <div>
              <label for="cvc" >cvc</label><br>
              <input  type="text" placeholder="e.g. 123"> 
            </div>
          </div>
        </div>

        <button id="submit" type="submit">Confirm</button>

      </form>
    </div>
  </main>
  
    <!-- Challenge done at "https://www.frontendmentor.io?ref=challenge" Coded by Abbigail Merrill -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="js/app.js"></script>
 </body>
</html>

When I type in anything and click submit, my function runs and the console.log runs, but I cant seem to properly return the input value, its always undefined. Any help here would be amazing![enter image description here][1]

CodePudding user response：

This is pretty convoluted. From what I gather.

$(function() {
    var submit = $('#submit');
    submit.click(function(){
        var name = $('#name').val();
        console.log(name);
    });
});

If you are using jQuery you should wrap it in document ready. Also,

$('#name').val()

Returns the value of element once, it doesn't subscribe to it. So you should pull every time you need a fresh value.

Edit: In your HTML #name element doesn't exist.

<input id="wholeName" type="text" placeholder="Your Name Here">

You used #wholeName. So change one to the other or the way around.