从表单 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
  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>

Answer 2

试试这样的：

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'))
});