Users choose between different inputs, represented by images, which pass different values to the server. What's the best/easiest way to set up the inputs on the front end?
The problem: Firefox doesn't send the submit 'name' to the server. In Chrome, the following works fine and the 'no' value shows up in params (second line is the rendered html).
<%= f.submit 'no', name: "response", :type => :image, :src => "/assets/images/cancel.png" %>
<input name="response" src="/assets/images/cancel.png" type="image" value="no">
Options I'm considering:
- Make each input a link, configuring the routes from there
- Process the click action with javascript, submitting data via ajax or .submit()
- Inline JavaScript: https://stackoverflow.com/a/25137838
Why I'm posting: Images will be used as single click input at different places on the site. One is having custom yes/no/maybe buttons as above. Another use is having users select between different images, where there could be 20 choices now and more in time.
Thoughts? If you think of a cleaner way to do this, I would love to hear it!