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

Share Improve this question Follow asked Jul 4, 2014 at 21:19 user3234309user3234309 17922 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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./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();
    }
  });
});