'Unable to get the values from a HTML FORM using JavaScript

I'm trying to create a budget tracker app using JavaScript. Took all the required steps but unable to get the values recorded into the empty array created after clicking the submit button. Below is my code.

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>

There is no error shown in the console. It is just giving an empty array after submitting the form. I'm unable to get where I'm missing something. Requesting your help.

Output I'm getting: [id: '']

Expected output: After filling in all the details like Employee Id: 111 Name: abc Paid Using: Card Date of Transaction: 01/01/2022

The expected output after filling in the details is: [{id: 111, name: 'abc', using:'Card', Date of Transaction: '01/01/2022'}]

Requesting your help in solving this.

Thanks & Regards, Kp

javascript

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Unable to get the values from a HTML FORM using JavaScript

Sources

Related Questions