如何获取Handlebars局部模板中表单的输入值？

方法1：原生JavaScript逐个获取表单字段值 #

在父页面的JS代码里监听Next按钮的点击事件，直接通过表单元素的ID或name属性提取输入值：

// 绑定按钮点击事件
document.querySelector('.btn-navigate-form-step').addEventListener('click', function() {
  // 获取单个输入框的值
  const firstName = document.getElementById('firstname').value;
  const lastName = document.getElementById('lastname').value;

  // 暂存数据示例：存入localStorage，后续步骤可取出使用
  const basicInfo = { firstName, lastName };
  localStorage.setItem('basicRegistrationInfo', JSON.stringify(basicInfo));

  // 也可以直接通过AJAX把数据发送到后端接口
  // fetch('/api/save-basic-info', {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/json' },
  //   body: JSON.stringify(basicInfo)
  // });
});

方法2：用FormData批量获取所有表单数据 #

如果表单字段较多，推荐用FormData对象一次性提取所有字段，更高效：

document.querySelector('.btn-navigate-form-step').addEventListener('click', function() {
  const form = document.getElementById('form');
  const formData = new FormData(form);
  
  // 转换为普通JS对象，方便操作
  const formDataObj = Object.fromEntries(formData);

  // 处理数据：暂存或提交到后端
  console.log(formDataObj); // 输出包含所有表单字段的键值对
});

关键注意点 #

• 确保表单的id="form"在整个页面中唯一，避免DOM选择出错
• 多步骤表单可把每一步的数据逐步存入全局对象或localStorage，最后统一提交到数据库
• 若要直接提交到后端，可在点击事件里发送AJAX请求，将FormData或JSON对象作为参数传递

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