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!

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!

• javascript
• ruby-on-rails
• form-for

1 Answer 1

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./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();
    }
  });
});