无法使用JavaScript从HTML FORM中获取值

我正在尝试使用JavaScript创建一个预算跟踪应用程序。采取了所有必要的步骤，但无法将值记录到单击提交按钮后创建的空数组中。下面是我的代码。

let id = document.getElementById("id").value;
let empId = document.getElementById("empID").value;
let name = document.getElementById("name").value;
let empName = document.getElementById("empname").value;
let using = document.getElementById("using").value;
let mode = document.getElementsByClassName("mode").value;
let day = document.getElementById("day").value;
let date = document.getElementById("date").value;
var expenseList = [];
document.getElementById("submit").addEventListener("click", (e) => {
e.preventDefault();
console.log(Object.assign(expenseList, { id: empId }));
});

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Expense Tracker Project</title>
</head>
<body>
<div class="employee-info">
<form class="expenesesForm">
<table>
<tr>
<td id="id">Employee ID:</td>
<td>
<input id="empID" type="text" placeholder="Employee ID" />
</td>
</tr>
<tr>
<td id="name">Name:</td>
<td>
<input id="empname" type="text" placeholder="Name" />
</td>
</tr>
<tr>
<td id="using">Paid Using:</td>
<td>
<select id="payment-mode">
<option class="" value="" selected disabled>
Select from the list
</option>
<option class="mode" value="card">Card</option>
<option class="mode" value="cheque">Cheque</option>
<option class="mode" value="cash">Cash</option>
<option class="mode" value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td id="day">Date of Transaction:</td>
<td><input id="date" type="date" /></td>
</tr>
<tr>
<td>
<br />
<input id="submit" type="submit" value="Submit" />
<input id="reset" type="reset" value="Cancel" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

控制台中没有显示错误。它只是在提交表单后给出一个空数组。我无法找到我缺少的东西。请求您的帮助。

我得到的输出：[id:"]

预期输出：填写完所有细节后员工Id:111名称：abc付费使用：卡交易日期：2022年1月1日

填写详细信息后的预期输出为：[｛id:111，名称："abc"，使用："Card"，交易日期："01/01/2022"｝]

请求您帮助解决此问题。

谢谢&当做Kp

要使此代码工作，我们必须执行以下操作：

将method="POST" action=""放入HTML页面中的表单
将JavaScript代码放在单击事件中，这样当用户单击提交时，它就会执行代码。
当元素是<td>元素时，您将根据它们的id来选择它们，并检索它们的value，但您要做的是选择td的innerText。

我使用fromEntries将数组转换为对象，因此最终代码如下所示：

document.getElementById("submit").addEventListener("click", (e) => {
e.preventDefault();
let id = document.getElementById("id").innerText;
let empId = document.getElementById("empID").value;
let name = document.getElementById("name").innerText;
let empName = document.getElementById("empname").value;
let using = document.getElementById("using").innerText;
let mode = document.getElementById("payment-mode").value;
let day = document.getElementById("day").innerText;
let date = document.getElementById("date").value;
let array =[[id,empId],[name,empName],[using, mode],[day,date]];
let expenseList = Object.fromEntries(array);
console.log(expenseList);
});

HTML代码将是：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Expense Tracker Project</title>
</head>
<body>
<div class="employee-info">
<form class="expenesesForm" method="POST" action="">
<table>
<tr>
<td id="id">Employee ID</td>
<td>
<input id="empID" name="empID"  type="text" placeholder="Employee ID" />
</td>
</tr>
<tr>
<td id="name">Name:</td>
<td>
<input id="empname" type="text" placeholder="Name" />
</td>
</tr>
<tr>
<td id="using">Paid Using</td>
<td>
<select id="payment-mode">
<option class="" value="" selected disabled>
Select from the list
</option>
<option class="mode" value="card">Card</option>
<option class="mode" value="cheque">Cheque</option>
<option class="mode" value="cash">Cash</option>
<option class="mode" value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td id="day">Date of Transaction</td>
<td><input id="date" type="date" /></td>
</tr>
<tr>
<td>
<br />
<input id="submit" type="submit" value="Submit" />
<input id="reset" type="reset" value="Cancel" />
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

相关内容

最新更新

热门标签：