Rails: Calling JS function on form_for radio buttons

Question

I have a form_for with radio buttons, and I want to call a javascript function when the radio button is changed.

The radio buttons are for Chapter's field 'type', of type boolean.

<%= form_for([book.category, book, chapter], remote: true ) do |f| %>

    <%= f.radio_button :type, true, onKeyUp: "alert('hi')", checked: 'checked' %> 
    <%= f.label :type, 'Link' %>

    <%= f.radio_button :type, false, onKeyUp: "alert('hi')" %> 
    <%= f.label :type, 'Text' %>

<% end %>

I've tried onchange and onclick as well. I've tried adding a {} before the options, and I get an error from Rails that there are too many parameters.

Eventually I want to call a function that hides/shows other text fields, but I can't even get the alert to execute!

I'm sure this is something really simple, but I've been searching the internet for the answer to this for way too long. Thanks for your help!

sled · Accepted Answer · 2014-07-04 22:00:08Z

5

this code actually works with an onclick event, inspect the generated HTML code with a developer extension like Firebug in your browser to make sure the attributes have been set correctly.

<%= form_for([book.category, book, chapter], remote: true ) do |f| %>

    <%= f.radio_button :type, true, checked: 'checked', onClick: "alert('hi TRUE!');" %> 
    <%= f.label :type, 'Link' %>

    <%= f.radio_button :type, false, onClick: "alert('hi False!');" %> 
    <%= f.label :type, 'Text' %>

<% end %>

Another way is to define a behavior using a data tag and then bind it with javascript (reference: http://blog.bigbinary.com/2012/10/10/data-behavior.html):

<%= form_for([book.category, book, chapter], remote: true ) do |f| %>

    <%= f.radio_button :type, true, checked: 'checked', data: {behavior: "clickable"} %> 
    <%= f.label :type, 'Link' %>

    <%= f.radio_button :type, false, data: {behavior: "clickable" } %> 
    <%= f.label :type, 'Text' %>

<% end %>

JavaScript:

$(document).ready(function() {    
  $('input[type="radio"][data-behavior="clickable"]').click(function(evt) {
    alert("you chose the option: " + $(this).val());
  });
});

Let's extend this to your scenario for hiding/showing other stuff:

View ERB:

<%= form_for([book.category, book, chapter], remote: true ) do |f| %>

    <%= f.radio_button :type, true, checked: 'checked', data: {behavior: "toggle-products"} %> 
    <%= f.label :type, 'Link' %>

    <%= f.radio_button :type, false, data: {behavior: "toggle-products" } %> 
    <%= f.label :type, 'Text' %>

<% end %>

JavaScript:

$(document).ready(function() {
  $('input[type="radio"][data-behavior="toggle-products"]').click(function(evt) {
    if($(this).val() == "true") { 
      $('.products').show();
    } else {
      $('.products').hide();
    }
  });
});

edited Jul 4, 2014 at 22:00

answered Jul 4, 2014 at 21:34

sled

14.6k3 gold badges46 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3234309 Over a year ago

I tried both of these suggestions but neither gives me the alert.

sled Over a year ago

hey, I'm sorry there were some typos, I think I've fixed it now, please try again. Make sure you use a developer extension for your browser (like Firebug) and inspect the generated HTML code whether the onClick attribute has been set properly.

sled Over a year ago

I've refactored and tested the first example, tested the second example too

user3234309 Over a year ago

Yay, it worked--thanks so much!! (I used the data-behavior one)

Mike Over a year ago

This is an old question, but I believe "click" is not an event of a radio input. I would suggest using the change event by using the onchange attribute in place of onClick in the ruby code above

Collectives™ on Stack Overflow

Rails: Calling JS function on form_for radio buttons

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related