选择特定select框选项后submit按钮无法触发问题求助

常见根因 #

• 表单校验规则未覆盖动态生成元素：如果表单初始化校验规则（比如jQuery Validate这类插件，初始化时只对页面加载时已存在的元素做了校验绑定，动态生成的select没有被纳入校验范围，触发了隐式的校验拦截导致提交被阻止。
• 提交事件绑定逻辑有元素存在性判断：submit绑定的回调里，可能写了固定判断$('input[type="text"]').val() != ''这类逻辑，当动态生成select出现时，文本输入框是隐藏状态、值为空，触发了自定义拦截逻辑导致提交终止。
• 动态生成的select没有设置name属性：表单提交时会自动收集带name属性的表单元素值，如果动态渲染的select漏加了name属性，部分自定义提交逻辑如果做了必填字段校验，会因为拿不到该字段的值阻止提交。
• 事件冒泡被阻断：给动态生成的select绑定change事件的时候，错误加了e.stopPropagation()或者return false，导致点击提交时的事件冒泡被阻断，无法触发上层的submit事件。

排查步骤 #

1. 先打开浏览器控制台，点击提交按钮时看有没有报错信息，如果有JS报错先定位报错代码位置。
2. 检查动态生成的select代码，确认是否加了正确的name属性，和原文本输入框的name是否一致、符合表单字段要求。
3. 如果使用了表单校验插件，动态生成select后需要手动给该元素添加校验规则，以jQuery Validate为例：

// 动态生成select之后调用
$('#动态生成的select的ID').rules('add', {
  required: true,
  messages: {
    required: "请选择选项"
  }
})

4. 调整提交事件回调逻辑，把原来只判断文本输入框的逻辑，改成根据第一个下拉框的选中值，判断当前是取文本输入框的值还是动态select的值：

$('form').submit(function(e) {
  var firstSelectVal = $('#第一个select的ID').val();
  var submitVal = '';
  if(firstSelectVal == '第一个选项的值') {
    submitVal = $('input[type="text"]').val().trim();
    if(!submitVal) {
      alert('请输入内容');
      e.preventDefault();
      return false;
    }
  } else if(firstSelectVal == '第二个选项的值') {
    submitVal = $('#动态生成的select的ID').val().trim();
    if(!submitVal) {
      alert('请选择选项');
      e.preventDefault();
      return false;
    }
  }
  // 后续正常提交逻辑
})

5. 检查给动态select绑定的所有事件，确认没有阻止事件冒泡或者返回false的逻辑。

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