从表单 HTML/JS 捕获用户输入

Question

我目前正在尝试从表单捕获输入数据并将该数据存储到对象数组中，然后该对象数组可以汇总控制台中捕获的数据。最重要的是，我尝试按照我的作业说明运行该函数，使用传统的 DOM 事件处理程序来存储该数据。

JS 的最终目标是使用 var t 通过 ID 'contactSubButton' 获取提交按钮的元素，并运行函数 contactInfo onsubmit...

但是，无论我尝试什么，我都会在控制台的“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>  

Answer 1

你有一个永远不会结束的循环for (i = 0;; i++) {你在这里传递不必要的变量contactInfo(fName, lName, email, country, subject) {您错误地分配了事件侦听器。你需要t.addEventListener('click', contactInfo);没有()你的引述是错误的console.log('Your submission details are:' < br > 'First Name: ' + fName)我想你想要这个我使用提交事件如果用户按取消，我会取消提交事件function contactInfo(event) { // passing the submit event&nbsp; let fName = document.getElementById('fname').value,&nbsp; &nbsp; lName = document.getElementById('lname').value,&nbsp; &nbsp; email = document.getElementById('email').value,&nbsp; &nbsp; country = document.getElementById('country').value,&nbsp; &nbsp; subject = document.getElementById('subject').value;&nbsp; const text = `Your submission details are:&nbsp; &nbsp; First Name: ${fName}&nbsp; &nbsp; Last Name:&nbsp; ${lName}&nbsp; &nbsp; Email:&nbsp; &nbsp; &nbsp; ${email}&nbsp; &nbsp; Country:&nbsp; &nbsp; ${country}&nbsp; &nbsp; Subject:&nbsp; &nbsp; ${subject}&nbsp; &nbsp; Send this now?`&nbsp;&nbsp;&nbsp; if (!confirm(text)) event.preventDefault(); // stop submission by cancelling the event passed}window.addEventListener("load", function() { // when page loads&nbsp; document.getElementById("contactForm").addEventListener('submit', contactInfo);});<div id="form">&nbsp; <form id="contactForm">&nbsp; &nbsp; <label for="fname">First Name</label>&nbsp; &nbsp; <input type="text" id="fname" name="firstname" placeholder="Your first name...">&nbsp; &nbsp; <label for="lname">Last Name</label>&nbsp; &nbsp; <input type="text" id="lname" name="lastname" placeholder="Your last name....">&nbsp; &nbsp; <label for="email">Email Address</label>&nbsp; &nbsp; <input type="email" id="email" name="email" placeholder="Please enter your email...">&nbsp; &nbsp; <label for="country">Country</label>&nbsp; &nbsp; <select id="country" name="country">&nbsp; &nbsp; &nbsp; <option value="usa">United States</option>&nbsp; &nbsp; &nbsp; <option value="canada">Canada</option>&nbsp; &nbsp; &nbsp; <option value="mexico">Mexico</option>&nbsp; &nbsp; </select>&nbsp; &nbsp; <label for="subject">Subject</label>&nbsp; &nbsp; <textarea id="subject" name="subject" placeholder="How can we help?"></textarea>&nbsp; &nbsp; <input type="submit" value="Submit" id="contactSubButton">&nbsp; &nbsp; <input type="reset" value="Reset Form">&nbsp; </form>

Answer 2

尝试这样的事情：网页：<form method="post" id="myForm">&nbsp; &nbsp;<input type="text" name="firstname" placeholder="Your first name...">&nbsp; &nbsp;<input type="submit" value="Submit" /></form>JS：document.getElementById('myForm').addEventListener ("submit", function (evt) {&nbsp; &nbsp;evt.preventDefault();&nbsp; &nbsp;var formData = new FormData(document.getElementById('myForm'))&nbsp; &nbsp;console.log('Your submission details are:' < br > 'First Name: ' + formData.get('firstname'))});