0

I'm currently trying to catch input data from a form and storing that data into an array of objects that can then summarize the data caught in the console. On top of this, I'm trying to run the function to store that data using a traditional DOM event handler per the instructions for my assignment.

The end goal with the JS is to use var t to get the element of the submit button by the ID 'contactSubButton' and run the function contactInfo onsubmit...

However, no matter what I try I get this message in the console at the line for the 't.addEventListener'....

Uncaught TypeError: Cannot read property 'addEventListener' of null


var t = document.getElementById("contactSubButton");
t.addEventListener('click', contactInfo());

function contactInfo(fName, lName, email, country, subject) {
  fName = document.getElementById('fname').value;
  lName = document.getElementById('lname').value;
  email = document.getElementById('email').value;
  country = document.getElementById('country').value;
  subject = document.getElementById('subject').value;

  for (i = 0;; i++) {
    var subInfo = [fName, lName, email, country, subject]
  }

  console.log('Your submission details are:' < br > 'First Name: ' + fName)
}
<div id="form">
  <form>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your first name...">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name....">

    <label for="email">Email Address</label>
    <input type="email" id="email" name="email" placeholder="Please enter your email...">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="usa">United States</option>
      <option value="canada">Canada</option>
      <option value="mexico">Mexico</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="How can we help?"></textarea>

    <input type="submit" value="Submit" id="contactSubButton">
    <input type="reset" value="Reset Form">

  </form>
</div>

Improve this question
7
  • you have to make sure the DOM already loaded before you find the element Commented Nov 25, 2020 at 9:30
  • 1
    Also you have a loop that never finishes for (i = 0;; i++) { Commented Nov 25, 2020 at 9:31
  • Also you pass unnecessary variables here contactInfo(fName, lName, email, country, subject) { Commented Nov 25, 2020 at 9:32
  • Also you assign the event listener incorrectly. You need t.addEventListener('click', contactInfo); without the () Commented Nov 25, 2020 at 9:32
  • Also the loop does nothing useful var subInfo = [fName, lName, email, country, subject] Commented Nov 25, 2020 at 9:33

2 Answers 2

Reset to default
1
  • you have a loop that never finishes for (i = 0;; i++) {
  • you pass unnecessary variables here contactInfo(fName, lName, email, country, subject) {
  • you assign the event listener incorrectly. You need t.addEventListener('click', contactInfo); without the ()
  • your quotes are wrong in the console.log('Your submission details are:' < br > 'First Name: ' + fName)

I think you want this

  • I use the submit event
  • I cancel the submit event if user presses cancel

function contactInfo(event) { // passing the submit event
  let fName = document.getElementById('fname').value,
    lName = document.getElementById('lname').value,
    email = document.getElementById('email').value,
    country = document.getElementById('country').value,
    subject = document.getElementById('subject').value;

  const text = `Your submission details are:
    First Name: ${fName}
    Last Name:  ${lName}
    Email:      ${email}
    Country:    ${country}
    Subject:    ${subject}
    Send this now?`
  
  if (!confirm(text)) event.preventDefault(); // stop submission by cancelling the event passed
}

window.addEventListener("load", function() { // when page loads
  document.getElementById("contactForm").addEventListener('submit', contactInfo);

});
<div id="form">
  <form id="contactForm">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your first name...">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name....">

    <label for="email">Email Address</label>
    <input type="email" id="email" name="email" placeholder="Please enter your email...">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="usa">United States</option>
      <option value="canada">Canada</option>
      <option value="mexico">Mexico</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="How can we help?"></textarea>

    <input type="submit" value="Submit" id="contactSubButton">
    <input type="reset" value="Reset Form">

  </form>

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

2 Comments

Thank you, that worked for me. Can you just elaborate on what exactly the 'e' passed into the function and the e.preventDefault do in this scenario?
The e is the submit event and event.preventDefault() is cancelling that event
0

Try something like this:

Html:

<form method="post" id="myForm">
   <input type="text" name="firstname" placeholder="Your first name...">
   <input type="submit" value="Submit" />
</form>

JS:

document.getElementById('myForm').addEventListener ("submit", function (evt) {
   evt.preventDefault();
   var formData = new FormData(document.getElementById('myForm'))
   console.log('Your submission details are:' < br > 'First Name: ' + formData.get('firstname'))
});
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.