使用class替代id实现无点击表单提交时submit报错怎么办

• 你之前用getElementById能正常运行，是因为该方法返回匹配id的单个DOM元素，元素本身自带submit()方法；但id全局唯一，循环输出多个商品表单时，只有第一个表单能被选中，其余的都无法触发。
• 换成getElementsByClassName后报错，是因为该方法返回的是所有匹配class的元素组成的类数组集合（HTMLCollection），集合本身没有submit()方法，直接调用必然抛出not a function的类型错误。
• 就算遍历集合给所有表单调用submit，逻辑也不成立：输入框失焦时只需要提交当前输入框所属的对应商品表单，不需要提交页面上所有购物车商品的表单。

1. 修改JS逻辑 #

不要全局查找表单，直接通过触发失焦事件的输入框定位所属表单即可，把原有JS代码替换为：

function CantCartUpdate (currentInput) {
  // 原生input元素自带form属性，直接指向其所属的表单节点
  currentInput.form.submit();
}

2. 修改输入框的事件绑定 #

找到循环输出的数量输入框代码，给onblur事件传入当前触发对象this，把原有行：

<input type="number" class="nro updateCant" min="1" name="cantidad" onblur="CantCartUpdate()" value="<?php echo $myCart[$i]['cantidad'];?>">

修改为：

<input type="number" class="nro updateCant" min="1" name="cantidad" onblur="CantCartUpdate(this)" value="<?php echo $myCart[$i]['cantidad'];?>">

• 增加提交前校验，仅当输入的合法数量和原有值不一致时才发起请求，减少无效提交：

function CantCartUpdate (currentInput) {
  const oldValue = currentInput.defaultValue;
  const newValue = currentInput.value.trim();
  const numValue = parseInt(newValue);
  if(!isNaN(numValue) && numValue >= 1 && newValue !== oldValue){
    currentInput.form.submit();
  }
}

• 隐藏多余的提交按钮，避免影响页面布局（自动提交场景不需要用户手动点按钮）：

.formCant .sbm {
  display: none;
}

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