HTML中使用JavaScript通过this关键字获取表单值为空如何解决

你传入myfunc的this是触发点击的元素本身，你读取的el.value是按钮的value属性，没有给按钮设置value的情况下自然返回空值。

正确实现方法 #

按钮作为表单的子元素，自带form属性指向所属的表单DOM对象，你可以通过这个属性访问表单内的所有控件：

示例代码 #

修改后的JS代码 #

function myfunc(el){
  // 阻止submit按钮默认的表单提交、页面刷新行为
  event.preventDefault();
  // 获取当前按钮所属的表单对象
  const targetForm = el.form;
  // 读取指定输入框的值
  const textValue = targetForm.querySelector('#textid').value;
  alert(textValue);

  // 如果需要获取表单内所有控件的键值对，可使用FormData处理
  const formData = new FormData(targetForm);
  const allFormValues = Object.fromEntries(formData.entries());
  // 打印所有表单值，可按需使用
  console.log(allFormValues);
}

表单代码说明 #

你现有的表单代码不需要修改，已经正确把按钮的this传入函数。

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