如何使用集合 select 作为 Rails 中的按钮？

Question

在我的表单中，我有一个 collection_select 可以 select 文章的名称，我的问题是当我 select 任何文章没有任何反应时

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

当然我会错过提交按钮，但我希望用户只需 select 文章名称并将数据传递给控制器（不必在 [=21= 下面放置按钮])

我找不到路，如果有人知道并能指导我，我将不胜感激

感谢您花时间阅读我。

Answer 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)
})

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

如何使用集合 select 作为 Rails 中的按钮？

How to use collection select as a button in Rails?

ruby-on-rails

ruby

actionview

actionviewhelper