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