How to use collection select as a button in Rails?

Question

In my form I have a collection_select to be able to select the name of the articles, my problem is that when I select any article nothing happens

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

Of course I would be missing the submit button, but I would like the user to simply select the article name and pass the data to the controller (without having to put a button below collection_select)

I can't find the way, if someone knows about it and can guide me I would be very grateful

Thank you for your time in reading me.

Nothing happens? What do you mean? May be strong params problem? What do you see in logs? — mechnicov, Jan 25 '22 at 17:36
I have a form with and I can't send the data to the controller because I don't have a button submit, and that's what I want to do, send data through the collection_select — Samuel Da Costa, Jan 25 '22 at 20:18
I think this answers your question https://stackoverflow.com/questions/8907867/can-someone-explain-collection-select-to-me-in-clear-simple-terms — Shaher Shamroukh, Jan 25 '22 at 21:04
@ShaherShamroukh Shamroukh I perfectly understand what each of the parameters does (thanks for the link information) but I would like that when the user clicks on an element of the list they can perform an action... I see that with the onchange method it would be a way to do it — Samuel Da Costa, Jan 25 '22 at 21:20
I think there's no way to do it without JS. Plain selects cannot submit the form automatically. Are you ready for a bit of JS code?))) — Ngoral, Jan 25 '22 at 21:30
I realized a little later :(, I'm thinking of using the onchange event, every time the user selects an option, I still see how I can integrate it. But any JS solution is welcome — Samuel Da Costa, Jan 25 '22 at 21:39

score 1 · Accepted Answer · answered Jan 26 '22 at 10:28

Supposing you have something like this as HTML for your form

<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>

You should put the following JS (given you do not use any JS libs such as 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)
})

You may also want to add an event listener for error and load on XHR to do some processing depending on was your request successful or not

Thank you very much indeed for giving me a hand (I was able to learn more about the XMLHttpRequest object) and most of all for helping me. Many gold badges for you I wish you :D — Samuel Da Costa, Jan 28 '22 at 21:22
@SamuelDaCosta I'm happy if my answer helped. Note, that you probably would want to include `authenticity_token` from your form, if you use `protect_from_forgery` in your controllers — Ngoral, Jan 31 '22 at 13:47

How to use collection select as a button in Rails?

1 Answers1