双AJAX提交表单共存触发addEventListener null错误如何解决

报错原因 #

你遇到的Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')报错本质是：执行addEventListener的表单对象为null，说明document.getElementById没有匹配到对应的DOM元素。
两个表单单独存在都正常、共存时只有第一个正常，基本是以下两个原因导致：

1. JS代码执行顺序早于DOM渲染：你的JS代码放在了HTML表单元素的前面，浏览器加载到JS时，后面的表单还没渲染完成，所以拿不到第二个表单的DOM节点。
2. Django模板变量冲突：你两个表单的字段都调用了{{form.xxx}}，如果视图传给模板的两个表单没有用不同的变量名，会导致其中一个表单的字段渲染失败，对应id的表单不存在。

解决步骤 #

1. 保证DOM加载完成后再执行JS，二选一即可：
   • 把所有JS代码放在HTML文件</body>标签之前，位置放在两个表单代码的后面
   • 把所有JS代码包裹在DOM加载完成的回调中，示例：

   // jQuery写法（你项目已经引入了jQuery直接用就行）
   $(function() {
     // 把你原来的所有JS代码放在这里面
   })
   

2. 给表单绑定事件前加非空判断，避免单表单页面出现无意义报错：
   把你原来获取表单绑定事件的代码改成如下写法：

   const create_city_form = document.getElementById('create-city')
   if (create_city_form) {
     create_city_form.addEventListener("submit",submitCityHandler);
   }
   
   const create_com_form = document.getElementById('create-com')
   if (create_com_form) {
     create_com_form.addEventListener("submit",submitCusComHandler);
   }
   

3. 修复Django模板变量冲突
   你的视图函数要给两个表单设置不同的传参变量名，示例：

   # 视图代码示例
   def your_page_view(request):
       city_form = CityForm()
       company_form = CompanyForm()
       return render(request, '你的模板路径.html', {
           'city_form': city_form,
           'company_form': company_form
       })
   

   对应模板里的字段也要改成对应变量：
   • 城市表单的字段改成{{city_form.city}}
   • 公司表单的字段改成{{company_form.name}}、{{company_form.city | add_class:'select2bs4 form-control'}}

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