如何在JS中获取HTML表单里数值输入框的数据

你的问题核心原因是数字输入框缺少name属性——FormData收集表单数据时，完全依赖元素的name属性识别字段，你的两个选择框都设置了name（dateRange、workingProvince），但数字输入框只有id没有name，所以FormData不会收录它的值。

具体修复步骤： #

1. 给数字输入框添加name属性，比如name="grossIncome"：

<input type="number" inputmode="numeric" id="incomeTextBox" name="grossIncome" placeholder="Gross Income" required>

2. 顺便修复HTML里的两个语法错误：
   • 月度选项标签未闭合：把<option value="Monthly">Monthly&lt;/option改成<option value="Monthly">Monthly</option>
   • 表单末尾多了一个多余的</div>，删除后保证HTML结构嵌套正确

修复后的完整代码： #

HTML部分：

<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" name="grossIncome" 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>
</form>

JS部分：

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;
}

修改后提交表单，控制台就能输出包含数字输入框值的完整数据对象了。

内容的提问来源于stack exchange，提问作者Reggie