0

在我的表单中，我有一个 collection_select 来选择文章的名称，我的问题是当我选择任何文章时什么都没有发生

 <%= form_with url: articles_path do |f| %>
   <%= collection_select(:article, :article_id, @articles, :id, :name ) %>
 <% end %>

当然我会错过提交按钮，但我希​​望用户只需选择文章名称并将数据传递给控制器​​（无需在 collection_select 下方放置按钮）

我找不到路，如果有人知道并可以指导我，我将非常感激

感谢您花时间阅读我。

4

1 回答 1

1

假设你有这样的东西作为你的表单的 HTML

<form action="/some_path" method="post">
  <select name="article_id" id="article_id">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</form>

您应该放置以下 JS（假设您不使用任何 JS 库，例如jquery）

const select = document.getElementById('article_id')
select.addEventListener('change', (event) => {
  const XHR = new XMLHttpRequest()
  const form = event.target.parentElement

  XHR.open(form.getAttribute('method'), form.getAttribute('action'))
  XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  XHR.send("article_id=" + encodeURIComponent(event.target.value)
})

您可能还想添加一个事件侦听器error并load根据XHR您的请求是否成功进行一些处理

于 2022-01-26T10:28:46.267 回答