Ruby/Rails单模态框双表单提交按钮冲突问题求助

问题根源 #

1. 表单嵌套：你的主视图drain_admin.html.haml里有一个外层form_for，同时在内部渲染了两个各自带form_for的局部视图。HTML规范不允许表单嵌套，这会导致浏览器无法正确识别表单边界，点击提交按钮时会触发错误的表单提交。
2. ID重复：主表单和_rename.html.haml里的表单ID都是adoption_form，DOM中元素ID必须唯一，这会进一步干扰表单的正常识别和行为。

修复步骤 #

1. 移除外层嵌套表单
   修改drain_admin.html.haml，去掉外层的form_for，让两个局部视图的表单成为独立的顶级表单：

   = render partial: 'things/free' 
   .break 
   = render partial: 'things/rename'
   

   （注意原代码里render partial: 'things/rename缺少闭合引号，需补上）

2. 修正表单ID，确保唯一
   修改_rename.html.haml里的表单ID，避免和其他表单重复：

   = form_for :thing, :url => things_path, :method => :put, :html => {:id => "rename_form"} do |f|
     = f.hidden_field "id"
     = f.hidden_field "user_id", :value => @thing.user_id
     %fieldset.form-group
       = f.label "name", "Rename this drain", :class => "control-label"
       = f.text_field "adopted_name", :value => @thing.display_name.titleize, :class => "form-control"
     %fieldset.form-group
       = f.submit "Rename", :class => "btn btn-primary btn-block"
   

3. 优化表单实例（可选但推荐）
   建议使用@thing实例代替符号:thing，让Rails自动处理表单字段的默认值和路径，更符合Rails最佳实践：
   比如_free.html.haml可以改成：

   = form_for @thing, url: things_path, method: :put, html: {id: "free_form"} do |f|
     = f.hidden_field :id
     = f.hidden_field :user_id, value: ""
     = f.hidden_field :adopted_name, value: ""
     %fieldset.form-group
       = f.submit t("buttons.free", thing: t("defaults.thing")), class: "btn btn-primary btn-block"
   

这样修改后，两个表单就会完全独立，各自的提交按钮只会触发自己对应的表单提交，不会互相干扰。

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