表单需刷新提交、Select不显示及TypeError错误修复与优化咨询

看起来你遇到了Turbolinks和动态表单渲染的典型问题，我来一步步帮你解决：

一、核心问题修复 #

1. 解决Uncaught TypeError: Cannot read property 'submit' of null报错 #

这个错误的根源是内联onchange事件依赖this.form，但Turbolinks动态加载后DOM上下文丢失，或者复选框无法正确找到所属表单。我们改用事件委托的方式来处理：

步骤1：移除内联事件

删掉所有复选框上的onchange: 'this.form.submit();'属性，比如：

<!-- 原来的代码 -->
<%= f.check_box :selected, { checked: true, value: item.selected, class: 'form-control return_check', onchange: 'this.form.submit();' } %>

<!-- 修改后 -->
<%= f.check_box :selected, { checked: true, value: item.selected, class: 'form-control return_check' } %>

步骤2：用JS事件委托处理提交

更新你的JS脚本，用Turbolinks兼容的委托方式绑定事件：

$(document).on('turbolinks:load', function() {
  // 处理复选框变更提交表单
  $(document).on('change', '.return_check, .mulitple-item input[type="checkbox"]', function() {
    // 用closest找到最近的表单，避免依赖this.form
    const $form = $(this).closest('.update-form');
    if ($form.length) {
      $form.submit();
    }
  });

  // 修复提交按钮的逻辑，阻止默认行为避免重复提交
  $(document).on('click', '.valid_return', function(e) {
    e.preventDefault();
    if (confirm("Are you sure?")) {
      $(this).closest('.update-form').submit();
    }
  });

  // 修复全选函数的语法错误
  window.checkAll = function(checktoggle){
    const checkboxes = document.getElementsByClassName('return_check');
    for (let i = 0; i < checkboxes.length; i++) {
      const box = checkboxes[i];
      if (box.type === 'checkbox') {
        box.checked = checktoggle;
        // 手动触发change事件，同步表单提交和Select显示
        box.dispatchEvent(new Event('change'));
      }
    }
  }
});

2. 修复Select标签仅刷新后显示的问题 #

这个问题是因为AJAX更新后，局部渲染的DOM没有触发Select的显示逻辑，我们结合ERB和JS来解决：

步骤1：修改ERB的Select容器

给Select所在的TD添加默认隐藏状态，根据item.selected决定初始显示：

<% else %>
  <% if item.selected == true %>
    <td class="mulitple-item"><%= f.check_box :selected, { checked: true, value: item.selected, class: 'form-control' } %></td>
    <!-- 添加容器控制显示 -->
    <td class="quantity-select-container" style="display: table-cell">
      <%= f.select :quantity, options_for_select((0..item.quantity), selected: 2), {}, { class: 'form-control select-qty' } %>
    </td>
    <td><%= f.submit "Valider le nombre", class: "btn btn-secondary btn-sm valid_return" %></td>
  <% else %>
    <td><%= f.check_box :selected, { checked: false, value: item.selected, class: 'form-control return_check' } %></td>
    <td class="quantity-select-container" style="display: none"></td>
  <% end %>
<% end %>

步骤2：添加JS的显示/隐藏逻辑

在之前的复选框change事件里补充：

$(document).on('change', '.return_check, .mulitple-item input[type="checkbox"]', function() {
  const $form = $(this).closest('.update-form');
  const $quantityContainer = $form.find('.quantity-select-container');
  
  // 根据复选框状态显示/隐藏Select
  if (this.checked) {
    $quantityContainer.show();
  } else {
    $quantityContainer.hide();
  }

  if ($form.length) {
    $form.submit();
  }
});

3. 确保AJAX请求正确渲染 #

因为你用了remote: true，控制器的patch动作需要返回js.erb模板，只更新当前修改的行，而不是整个表格。比如：

# 控制器代码
def update
  @item = Item.find(params[:id])
  @item.update(item_params)
  # 返回局部模板更新当前行
  respond_to do |format|
    format.js { render partial: 'return_item', locals: { item: @item } }
  end
end

对应的_return_item.js.erb：

// 替换当前行的内容
$('tr[data-item-id="<%= item.id %>"]').html('<%= j render partial: "return_item_row", locals: { item: item } %>');

（记得给表格行添加data-item-id="<%= item.id %>"属性，方便定位）

二、大型表单优化建议 #

针对每行一个表单的退货管理页面，这里有几个实用的优化方向：

• 合并表单，减少AJAX请求：不要每行一个表单，改成整个表格一个大表单，用数组参数（比如return_items[][id]、return_items[][selected]）批量提交，减少请求次数，提升性能。
• 虚拟滚动优化：如果商品数量超过50条，实现虚拟滚动，只渲染可见区域的行，减少DOM节点数量，提升页面流畅度。
• 添加交互反馈：提交时显示加载spinner，成功后给出提示（比如“已更新退货选择”），失败时显示错误信息，提升用户体验。
• 前端验证：添加逻辑验证，比如退货数量不能为0、不能超过购买数量，避免无效请求发送到后端。
• 代码解耦：把ERB里重复的条件判断提取成局部模板（比如_return_item_row.html.erb），减少代码冗余；所有交互逻辑放到JS文件，避免内联事件。
• Turbolinks缓存优化：确保静态资源被Turbolinks缓存，AJAX返回内容后用turbolinks:render事件重新绑定必要的事件。

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