JS DOM生成表单时，如何将表单数据作为onclick函数参数？

我用JS DOM生成表单的代码如下：

const my_form = document.createElement("form");
my_form.enctype = "multipart/form-data";
my_form.onsubmit = function(){return false;};

// inputs here

const div_submit = document.createElement("div");
div_submit.className = "form-group";
const submit = document.createElement("input");
submit.type = "submit";
submit.value = "Register";
submit.onclick = function(){my_function(this.form);};
div_submit.appendChild(submit);
my_form.appendChild(div_submit);

直接编写HTML代码时使用this.form有效，但通过JS DOM实现时提示this.form未定义。请问如何获取其他输入框的数据并将其作为onclick函数的参数？

解决方法 #

1. 直接引用作用域内的my_form变量 #

既然my_form是当前代码作用域中已创建的表单变量，完全可以直接在onclick回调里使用它，无需依赖this.form：

submit.onclick = function(){
  my_function(my_form);
};

拿到表单对象后，就能通过form.elements集合获取所有表单控件，或者用form.querySelector()精准定位输入框。

2. 先挂载submit到表单再绑定事件 #

this.form未定义的原因通常是绑定事件时，submit按钮还没被添加到表单DOM树中。调整代码顺序，先把submit按钮挂载到表单，再绑定点击事件，this.form就能正常指向表单对象：

// 先完成submit的挂载流程
div_submit.appendChild(submit);
my_form.appendChild(div_submit);
// 再绑定点击事件
submit.onclick = function(){
  my_function(this.form);
};

3. 获取输入框数据的示例代码 #

拿到表单对象后，获取输入数据的常见方式：

function my_function(form) {
  // 通过name属性获取输入值
  const username = form.elements['username'].value;
  // 通过选择器获取邮箱输入值
  const email = form.querySelector('input[type="email"]').value;
  // 获取文件上传控件的文件（适配multipart/form-data场景）
  const avatarFile = form.elements['avatar'].files[0];
  
  // 后续业务逻辑处理
}

内容的提问来源于stack exchange，提问作者Giraffes are Fake