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

Question

我目前正在尝试从表单捕获输入数据并将该数据存储到对象数组中，然后该对象数组可以汇总控制台中捕获的数据。最重要的是，我尝试按照我的作业说明运行该函数，使用传统的 DOM 事件处理程序来存储该数据。JS 的最终目标是使用 var t 通过 ID 'contactSubButton' 获取提交按钮的元素，并运行函数 contactInfo onsubmit...但是，无论我尝试什么，我都会在控制台的“t.addEventListener”行中收到此消息......Uncaught TypeError: Cannot read property 'addEventListener' of nullvar 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

尝试这样的事情：

网页：

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

});