Rails远程表单借助HotWire无法触发JavaScript请求问题求助

算力阿峰

2026-8-21

问题分析

表单本该通过AJAX远程提交（不刷新页面），但实际触发了普通表单提交导致页面刷新，核心原因是Turbo配置冲突、提交触发方式不符合Turbo的处理逻辑。

解决方案

1. 移除Turbo禁用属性

你给表单设置了data: { turbo: "false" }，这会强制Turbo放弃对表单的AJAX处理，让表单走传统页面刷新提交。要启用远程提交，直接删除这个属性：

<%= form_tag(get_provider_configuration_server_providers_path, method: :post, local: false) do %>
  <%= hidden_field_tag :provider, '', id: 'provider-configuration-value' %>
  <%= button_tag 'Save Deploy Script', style: 'display: flex;', id: 'btn-provider-configuration'  %>
<% end %>

注：local: false是Rails中启用远程提交的标识，配合Turbo会自动处理为AJAX请求。

2. 明确请求类型（可选）

如果控制器仅响应format.js，可以给表单添加data: { type: 'script' }，确保请求头明确要求JS格式，让控制器的format.js分支正确触发：

<%= form_tag(get_provider_configuration_server_providers_path, method: :post, local: false, data: { type: 'script' }) do %>
  <!-- 表单内容 -->
<% end %>

3. 修改JS提交逻辑，直接触发表单提交

通过点击按钮的方式可能无法正确触发Turbo的远程提交逻辑，建议直接调用表单的submit方法。先给表单添加ID：

<%= form_tag(get_provider_configuration_server_providers_path, method: :post, local: false, id: 'provider-config-form') do %>
  <!-- 表单内容 -->
<% end %>

然后更新JS代码：

document.getElementById('server_server_provider').addEventListener('change', function() { 
  const form = document.getElementById('provider-config-form');
  document.getElementById('provider-configuration-value').value = this.value;
  form.submit();
});