Rails中如何实现子表单与父表单的提交行为隔离？

HTML规范不允许表单嵌套，浏览器会自动忽略子表单的<form>标签，把它当作父表单的一部分，所以点击子表单的提交按钮时，会触发父表单的提交行为。要让两个表单提交独立，你可以按以下方式修改：

方案1：将子表单移出父表单结构 #

直接把分类表单放在文章表单的外部，视觉上的位置可以用CSS调整：

修改new.html.erb #

<%= form_with model: @article do |f| %>
  <!-- 文章字段 -->
<% end %>

<!-- 独立的分类表单 -->
<%= render 'category_form' %>

修改_category_form.html.erb（可选：启用AJAX提交避免页面刷新） #

如果不想提交分类时刷新整个页面，可以给表单加上local: false启用AJAX：

<%= form_with model: Category, url: categories_path, local: false do |f| %>
  <%= f.label :name %>
  <%= f.text_field :name %>
  <%= f.submit "Create Category" %>
<% end %>

方案2：用JavaScript阻止子表单默认提交（适合必须放在父表单视觉区域内的场景） #

如果因为布局需求必须把分类表单放在文章表单的视觉范围内，可以通过JS手动拦截提交事件，用AJAX单独提交分类表单：

修改_category_form.html.erb #

<%= form_with model: Category, url: categories_path, id: 'category-form' do |f| %>
  <%= f.label :name %>
  <%= f.text_field :name %>
  <%= f.submit "Create Category" %>
<% end %>

添加JavaScript代码 #

可以把这段代码放在页面的<script>标签里，或者项目的JS文件中：

document.getElementById('category-form').addEventListener('submit', function(e) {
  // 阻止默认的表单提交行为
  e.preventDefault();
  
  // 收集表单数据
  const formData = new FormData(this);
  
  // 发送AJAX请求
  fetch(this.action, {
    method: this.method,
    body: formData,
    headers: {
      // 带上Rails的CSRF令牌
      'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
    }
  })
  .then(response => {
    if (response.ok) {
      alert('分类创建成功');
      this.reset(); // 清空表单输入
    } else {
      throw new Error('提交失败');
    }
  })
  .catch(error => {
    console.error(error);
    alert('分类创建失败，请重试');
  });
});

这样点击分类表单的提交按钮时，只会单独提交分类数据，不会触发文章表单的提交。

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