How to get html form to see textbox data in js - html

Question

I have a form with 3 entries and an input submit button. One field is a textbox that prompt a numerical entry and the other 2 are selection fields. After many attempts I was finally able to get the browser to pick up on the selection options, however when i console.log it its still not seeing the numerical entry.
const submitForm = (event) => {
const form = document.getElementById('form');
const data = new FormData(form);
const dataObject = {};
for (const [key, value] of data.entries()) {
dataObject[key] = value;
};
console.log(dataObject);
return false;
}
<form name="form" onsubmit="javascript:submitForm();return false;" id="form">
<div class="dataEntry">
<div class="grossIncome">
<label for="grossIncomeEntry">Enter your gross income</label>
<input type="number" inputmode="numeric" id="incomeTextBox" placeholder="Gross Income" required>
</div>
<div class="timeframe">
<label for="perTimeframe">Per</label>
<select name="dateRange" id="incomeTimeframe">
<option value="Annual">Annual</option>
<option value="Monthly">Monthly</option
</select>
</div>
<div class="employmentLocation">
<label for="workingProvince">Where do you work?</label>
<select name="workingProvince" id="provinces">
<option value="Ontario">Ontario</option>
<option value="Quebec">Quebec</option>
</select>
</div>
<button type="submit" id="calculate">Calculate</button>
</div>
</div>
</form>

Answer 1

This operation:
new FormData(form)
Is essentially creating key/value pairs of form elements/values. The key is the name of the form element, and the value is its current value.
You can observe this when you see the property names in the resulting object being logged to the console. The property name for the <select> value is "dateRange". When you observe your code, where do you expect that property name comes from? Given that, what do you expect the property name for the <input> value to be and why?
Your <select> has a name, but your <input> does not. Simply add a name to it:
const submitForm = (event) => {
const form = document.getElementById('form');
const data = new FormData(form);
const dataObject = {};
for (const [key, value] of data.entries()) {
dataObject[key] = value;
};
console.log(dataObject);
return false;
}
<form name="form" onsubmit="javascript:submitForm();return false;" id="form">
<div class="dataEntry">
<div class="grossIncome">
<label for="grossIncomeEntry">Enter your gross income</label>
<input type="number" inputmode="numeric" id="incomeTextBox" placeholder="Gross Income" required name="incomeTextBox">
</div>
<div class="timeframe">
<label for="perTimeframe">Per</label>
<select name="dateRange" id="incomeTimeframe">
<option value="Annual">Annual</option>
<option value="Monthly">Monthly</option
</select>
</div>
<div class="employmentLocation">
<label for="workingProvince">Where do you work?</label>
<select name="workingProvince" id="provinces">
<option value="Ontario">Ontario</option>
<option value="Quebec">Quebec</option>
</select>
</div>
<button type="submit" id="calculate">Calculate</button>
</div>
</div>
</form>