后端开发者求助：点击按钮时如何同时传递三个表单值到JS函数

下面给你几种实用且符合前端最佳实践的实现方式，按需选择：

方式一：使用FormData（推荐，扩展性强） #

把所有表单元素包裹在<form>标签里，利用浏览器原生的FormData API一次性获取所有带name属性的表单值，这种方式最简洁，后续新增表单元素也不用修改JS逻辑。

修改后的HTML： #

<form id="my-form">
  <input id="entered_value" type="number" name="entered_value">
  <input id="entered_valuetwo" type="text" name="entered_valuetwo">
  <select id="selected_value" name="selected_value">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <button type="button" id="send-data">Click me</button>
</form>

JS逻辑： #

const sendBtn = document.getElementById('send-data');
const form = document.getElementById('my-form');

// 定义接收数据的函数
function handleFormData(data) {
  // 这里处理你的业务逻辑，比如打印数据
  console.log('输入的数字：', Number(data.entered_value));
  console.log('输入的文本：', data.entered_valuetwo);
  console.log('选中的值：', data.selected_value);
}

sendBtn.addEventListener('click', () => {
  const formData = new FormData(form);
  // 把FormData转成普通对象方便使用
  const formObj = Object.fromEntries(formData);
  // 传递给处理函数
  handleFormData(formObj);
});

方式二：手动获取单个元素值（适合小型表单） #

如果表单元素很少，直接通过ID获取每个元素的value，再传递给函数，逻辑直观易懂。

JS逻辑： #

const sendBtn = document.getElementById('send-data');

function handleValues(numValue, textValue, selectValue) {
  console.log('数字值：', Number(numValue));
  console.log('文本值：', textValue);
  console.log('选中值：', selectValue);
}

sendBtn.addEventListener('click', () => {
  const numVal = document.getElementById('entered_value').value;
  const textVal = document.getElementById('entered_valuetwo').value;
  const selectVal = document.getElementById('selected_value').value;
  
  handleValues(numVal, textVal, selectVal);
});

方式三：结合表单submit事件（可选） #

如果把按钮改成type="submit"，可以监听表单的submit事件，同时阻止默认提交行为，这种方式更符合表单的原生行为：

修改HTML按钮： #

<button type="submit" id="send-data">Click me</button>

JS逻辑： #

const form = document.getElementById('my-form');

form.addEventListener('submit', (e) => {
  // 阻止表单默认跳转行为
  e.preventDefault();
  
  const formData = new FormData(form);
  const formObj = Object.fromEntries(formData);
  
  handleFormData(formObj);
});

注意点： #

• 对于type="number"的输入框，value返回的是字符串，需要用Number()或parseInt()转成数字类型再使用。
• 如果需要做表单验证，建议在获取值之后先校验格式，再传递给处理函数。

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