如何用JS/JQuery实现点击提交时自动填充表单空输入框？

当然可以搞定这个问题！核心思路就是在表单提交前，自动检查所有文本类输入框（文本框、文本域），把空值替换成不会被忽略的占位符（比如非断行空格，对应HTML里的 ），这样后续生成表格时就不会跳过这些单元格了。

下面分jQuery和原生JavaScript两种方案给你代码，你可以根据项目情况选择：

方案1：jQuery版本 #

假设你的表单ID是form-with-dynamic-rows，代码如下：

$(document).ready(function() {
  // 监听表单提交事件
  $('#form-with-dynamic-rows').on('submit', function(e) {
    // 遍历表单内所有文本输入框和文本域
    $(this).find('input[type="text"], textarea').each(function() {
      // 去除首尾空格后判断是否为空
      if ($.trim($(this).val()) === '') {
        // 填充Unicode非断行空格（对应HTML的 ）
        $(this).val('\u00A0');
      }
    });

    // 如果需要先完成处理再提交，可取消默认行为后手动提交（可选）
    // e.preventDefault();
    // this.submit();
  });
});

方案2：原生JavaScript版本 #

如果项目没引入jQuery，用原生JS也能实现同样效果：

document.addEventListener('DOMContentLoaded', function() {
  const targetForm = document.getElementById('form-with-dynamic-rows');
  
  targetForm.addEventListener('submit', function(e) {
    // 获取所有需要检查的文本输入元素
    const textInputs = targetForm.querySelectorAll('input[type="text"], textarea');
    
    textInputs.forEach(input => {
      // 检查输入值是否为空（去除首尾空格）
      if (input.value.trim() === '') {
        // 设置为非断行空格，避免单元格空值被跳过
        input.value = '\u00A0';
      }
    });

    // 若需自定义提交逻辑，取消默认行为后手动提交（可选）
    // e.preventDefault();
    // targetForm.submit();
  });
});

额外说明 #

1. 为什么用\u00A0？
   普通空格在很多表格生成逻辑里可能被当作空值处理，而非断行空格（Unicode字符\u00A0）会被识别为有效内容，确保单元格不会被跳过。它在HTML里渲染出来就是和 一样的空格效果。

2. 动态添加的行也能生效吗？
   没问题！代码是在表单提交时实时查找当前所有输入元素，不管是页面初始加载的还是后来通过“添加行”按钮动态生成的，都会被检查到。

3. 其他输入类型的扩展处理
   如果你还担心单选按钮、下拉框的空值问题，可以补充逻辑：

   • 单选按钮：给每组单选按钮设置一个默认选中项，或者提交时检查未选中的组，手动设置一个占位值
   • 下拉选择框：确保下拉列表里有一个默认选项（比如<option value="\u00A0">请选择</option>），避免出现未选择的情况

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