如何从其他文件/模块函数中获取模态表单的input值？

我正在开发一个Todo项目，目前遇到技术问题：表单是从其他文件的模块中创建并导入的，导致当前文件无法获取用户在input中输入的值。

相关代码 #

JavaScript代码

function createForm() {
  const addTaskForm = document.createElement('form');
  //code that creates the form
  const titleInput = document.createElement('input');
  const descInput = document.createElement('textarea');
  const dueDateInput = document.createElement('input');
  const priorityInput = document.createElement('input');
  const confirmButton = document.createElement('button');
  confirmButton.textContent = 'confirm';
  const cancelButton = document.createElement('button');
  cancelButton.textContent = 'cancel';
  addTaskForm.append(
    titleInput,
    descInput,
    dueDateInput,
    priorityInput,
    confirmButton,
    cancelButton,
  );
  return addTaskForm;
}

function loadAddTaskDiv() {
  const wrapper = document.getElementById('wrapper');
  const div = document.createElement('div');
  
  const addTaskForm = createForm();
  div.append(addTaskForm);
  wrapper.append(div);
  return div;
}

loadAddTaskDiv();

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="wrapper"></div>
</body>

</html>

解决方案 #

这里提供三种实用的解决思路，根据项目模块化程度选择：

1. 修改模块返回值，暴露输入元素引用

在createForm函数中，不仅返回表单元素，还返回所有输入控件的引用，调用方可直接获取输入值：

function createForm() {
  const addTaskForm = document.createElement('form');
  const titleInput = document.createElement('input');
  titleInput.name = 'title';
  const descInput = document.createElement('textarea');
  descInput.name = 'desc';
  const dueDateInput = document.createElement('input');
  dueDateInput.name = 'dueDate';
  const priorityInput = document.createElement('input');
  priorityInput.name = 'priority';
  const confirmButton = document.createElement('button');
  confirmButton.textContent = 'confirm';
  confirmButton.type = 'submit';
  const cancelButton = document.createElement('button');
  cancelButton.textContent = 'cancel';
  cancelButton.type = 'button';

  addTaskForm.append(
    titleInput,
    descInput,
    dueDateInput,
    priorityInput,
    confirmButton,
    cancelButton,
  );

  // 返回表单和输入元素集合
  return {
    form: addTaskForm,
    inputs: {
      title: titleInput,
      desc: descInput,
      dueDate: dueDateInput,
      priority: priorityInput
    }
  };
}

function loadAddTaskDiv() {
  const wrapper = document.getElementById('wrapper');
  const div = document.createElement('div');
  const { form, inputs } = createForm();
  div.append(form);
  wrapper.append(div);

  // 监听表单提交，直接通过inputs获取值
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const taskData = {
      title: inputs.title.value,
      desc: inputs.desc.value,
      dueDate: inputs.dueDate.value,
      priority: inputs.priority.value
    };
    // 这里处理任务添加逻辑
    console.log(taskData);
  });

  return div;
}

loadAddTaskDiv();

2. 给输入元素设置name/id，通过DOM查询获取

给每个输入元素设置唯一的name或id，后续通过表单的elements属性或者document.querySelector获取值：

function createForm() {
  const addTaskForm = document.createElement('form');
  const titleInput = document.createElement('input');
  titleInput.name = 'task-title'; // 设置name
  const descInput = document.createElement('textarea');
  descInput.name = 'task-desc';
  const dueDateInput = document.createElement('input');
  dueDateInput.name = 'task-dueDate';
  const priorityInput = document.createElement('input');
  priorityInput.name = 'task-priority';
  // ... 其他元素创建代码

  addTaskForm.append(titleInput, descInput, dueDateInput, priorityInput, confirmButton, cancelButton);
  return addTaskForm;
}

// 在当前文件中获取值
document.getElementById('wrapper').addEventListener('submit', (e) => {
  e.preventDefault();
  if (e.target.tagName === 'FORM') {
    const title = e.target.elements['task-title'].value;
    const desc = e.target.elements['task-desc'].value;
    // 其他输入值同理
    console.log(title, desc);
  }
});

3. 使用事件委托监听表单提交

不需要修改模块代码，直接在父容器上监听表单提交事件，通过事件对象获取表单和输入值：

// 当前文件中添加事件监听
document.getElementById('wrapper').addEventListener('submit', (e) => {
  e.preventDefault();
  // 确认触发事件的是目标表单
  if (!e.target.classList.contains('add-task-form')) return;
  
  // 通过表单元素的querySelector获取输入值
  const title = e.target.querySelector('input:nth-child(1)').value;
  const desc = e.target.querySelector('textarea').value;
  // 其他输入值同理
  console.log(title, desc);
});

// 可选：给表单添加类名方便识别
function createForm() {
  const addTaskForm = document.createElement('form');
  addTaskForm.classList.add('add-task-form');
  // ... 其他代码
}

方法对比 #

• 暴露元素引用：耦合度稍高，但能直接控制输入元素，适合需要实时验证、设置默认值的场景。
• 设置name/id查询：简单直观，不需要修改模块返回结构，但要注意避免命名冲突。
• 事件委托：完全解耦模块与调用方，适合模块化程度高、不想修改原有模块代码的场景。

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