基于其他表单数据新建表单及下拉选Other显示输入框方案问询

1. 如何基于另一表单的数据新建一个表单？ #

这个需求可以分两种常见场景实现，看你更倾向后端预填充还是前端动态复制数据：

后端预填充（适配你的Rails环境） #

假设你有两个关联的模型/表单，比如ExistingForm和NewForm，可以在新建NewForm的控制器动作里先拉取源表单的数据，赋值给新表单实例，这样渲染出来的表单会自动带上源数据：

# app/controllers/new_forms_controller.rb
def new
  # 通过URL参数获取源表单ID
  @existing_form = ExistingForm.find(params[:existing_form_id])
  # 预填充新表单的字段
  @new_form = NewForm.new(
    title: @existing_form.title,
    content: @existing_form.content,
    # 按需添加其他需要复制的字段
  )
end

然后在new.html.erb里用常规的form_with渲染@new_form即可，字段会自动填充源表单的值。

前端动态复制（纯JS实现） #

如果想在页面上直接从已填好的表单复制数据到新表单，用JavaScript读取源表单的输入值，再赋值给新表单对应字段：

// 等待页面加载完成
document.addEventListener('DOMContentLoaded', () => {
  const sourceForm = document.getElementById('existing-form');
  const newForm = document.getElementById('new-form');
  const copyBtn = document.getElementById('copy-data-btn');

  copyBtn.addEventListener('click', () => {
    // 复制单个字段示例，按需扩展
    newForm.querySelector('[name="new_form[title]"]').value = sourceForm.querySelector('[name="existing_form[title]"]').value;
    newForm.querySelector('[name="new_form[content]"]').value = sourceForm.querySelector('[name="existing_form[content]"]').value;
  });
});

2. 选择「Other」时显示文本输入框的实现 #

从你给出的ERB代码来看，这是Rails项目的表单，我们结合JS来实现这个交互，步骤如下：

第一步：完善表单代码 #

先把下拉菜单和隐藏的输入框写完整，给下拉加个唯一ID，输入框默认隐藏：

Time Period: 
<% if f.object.award.add_period? %>
  <div class="time_period_<%= f.object.award.id %>">
    <%= f.select :time_period, 
      [['2018年1月', '2018-01'], ['第一季度', 'Q1-2018'], ['2018年夏季', 'Summer-2018'], ['Other', 'other']],
      {},
      { id: "time_period_#{f.object.award.id}" } %>
    <!-- 默认隐藏的输入框容器 -->
    <div id="other_time_period_container_<%= f.object.award.id %>" style="display: none; margin-top: 8px;">
      <%= f.text_field :other_time_period, placeholder: "请输入具体时间段" %>
    </div>
  </div>
<% end %>

第二步：添加交互逻辑的JS #

写JS监听下拉菜单的变化，选中「Other」时显示输入框，否则隐藏：

document.addEventListener('DOMContentLoaded', () => {
  // 监听所有时间段下拉菜单（支持多个表单实例）
  document.querySelectorAll('[id^="time_period_"]').forEach(select => {
    const awardId = select.id.split('_')[2];
    const inputContainer = document.getElementById(`other_time_period_container_${awardId}`);

    // 页面加载时先检查当前选中值
    toggleOtherInput(select.value, inputContainer);

    // 监听下拉变化事件
    select.addEventListener('change', () => {
      toggleOtherInput(select.value, inputContainer);
    });
  });

  // 封装显示/隐藏逻辑
  function toggleOtherInput(selectedValue, container) {
    if (selectedValue === 'other') {
      container.style.display = 'block';
    } else {
      container.style.display = 'none';
      // 可选：隐藏时清空输入框内容，避免残留数据
      container.querySelector('input').value = '';
    }
  }
});

额外注意事项 #

• 记得在控制器的强参数里允许other_time_period，不然提交后数据会丢失：

# 假设是awards控制器
def award_params
  params.require(:award).permit(:time_period, :other_time_period, # 其他需要的参数...)
end

• 如果你的Rails项目用了Turbo（Rails7默认），可以把事件改成turbo:load，确保脚本在页面更新后也能正常运行。

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