Passing html form data to JavaScript variable

Question

I would like to take the information stored in the form from my date input and send it to a variable in JavaScript.

<body>
    <form action="" method="get" class="countdown">
        <div class="countdown">
            <label for="birthday">Enter your birthday: </label>
            <input type="date" name="birthday" id="birthday" required>
        </div>
        <div class="countdown">
            <input type="submit" value="Submit"
        </div>
    </form>
    
    
    
<script src="lab3.js"></script>
</body>

var bDay = document.getElementById("birthday").value
console.log(bDay)

Seth B · Accepted Answer · 2021-02-14 02:37:27Z

3

You'll want to do something like this:

//Wait for page to finish loading
window.addEventListener("load",function(){
  //Run function when you submit form
  document.getElementById("form").addEventListener("submit",function(e){
    //Stop the form from submitting:
    e.preventDefault();

    //Get your input value
    var bDay = document.getElementById("birthday").value;

    //Log it to your console
    console.log(bDay)
  });
});

<!DOCTYPE html>
<html>
  <body>
    <!-- Add an id to your form-->
    <form id='form' action="" method="get" class="countdown">
      <div class="countdown">
        <label for="birthday">Enter your birthday: </label>
        <input type="date" name="birthday" id="birthday" required>
      </div>
      <div class="countdown">
        <input type="submit" value="Submit">
      </div>
    </form>
    <!-- <script src="lab3.js"></script> -->
  </body>
</html>

edited Feb 14, 2021 at 2:37

answered Feb 14, 2021 at 2:31

Seth B

1,0567 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lexus de Vinco Over a year ago

Great solution! YOU are a great mind!

Collectives™ on Stack Overflow

Passing html form data to JavaScript variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related