表单可选字段提交后保留输入值，解决null赋值报错问题

我来帮你搞定这个问题，你遇到的两个核心问题：一是DOM加载顺序导致找不到元素（出现"无法设置null的value属性"错误），二是可选字段无值时的处理逻辑不完善。下面是一步步的修复方案：

1. 先解决DOM加载问题 #

你的代码里直接在全局执行document.getElementById('l2').value=getl2();，这时候浏览器可能还没渲染完表单元素，导致获取到的是null，自然没法设置value。解决办法是把赋值代码放到DOM加载完成的回调里：

document.addEventListener('DOMContentLoaded', function() {
  // 等DOM加载完再操作元素
  const l2Input = document.getElementById('l2');
  const l3Input = document.getElementById('l3');
  
  l2Input.value = getl2() || '';
  l3Input.value = getl3() || '';
});

2. 完善取值函数的返回逻辑 #

原来的getl2和getl3在localStorage没有值时会返回undefined，虽然设置input value为undefined也会显示空，但统一返回空字符串会更稳妥，也符合输入框的默认状态：

function getl2(){ 
  return localStorage.getItem("user_selected_l2") || '';
}
function getl3(){ 
  return localStorage.getItem("user_selected_l3") || '';
}

3. 修复提交函数的存储逻辑 #

你的setCate函数只获取了输入值，但没有存到localStorage里，而且表单默认提交会刷新页面，可能导致存储操作还没完成就刷新了，所以要阻止默认提交行为：

function setCate(e){ 
  // 阻止表单默认提交（避免页面刷新丢失操作）
  e.preventDefault();
  
  const l2 = document.getElementById('l2').value; 
  const l3 = document.getElementById('l3').value; 
  
  // 存到localStorage，空字符串也可以存，代表用户未输入内容
  localStorage.setItem("user_selected_l2", l2);
  localStorage.setItem("user_selected_l3", l3);
  
  // 如果需要后续提交表单（比如发送请求到后端），可以在这里添加AJAX逻辑
  // 示例：fetch('/your-api-url', { method: 'POST', body: new FormData(e.target) })
}

同时要修改form的onsubmit属性，把事件对象传进去：

<form class="cat_select" onsubmit="setCate(event)"> 
  <input class="l2" name="l2" id="l2" type="text" style="width:30%"> 
  <input class="l3" name="l3" id="l3" type="text" style="width:50%"> 
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="cat_submit">Submit</button> 
</form>

最终效果 #

这样修改后：

• 页面加载时，会从localStorage读取之前的输入值（如果有的话）填充到输入框，无值则显示空
• 提交表单时，会把当前输入的值（包括空字符串）存到localStorage，同时不会自动刷新页面（如果需要刷新可以手动添加window.location.reload()）
• 彻底解决"无法设置null的value属性"的错误，因为我们确保了DOM加载完成后再操作元素

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