How to show/hide in rails form with jquery?

Question

I have a rails view (erb) that displays some checkboxes (populated data from seed.rb).. When certain checkboxes are selected i need a div to appear below it that collects more information.. For example: the user checks "anniversary" and a div below it appears asking for the date. Is jquery the best way to do this? Coffescript?

*Note: Im using the Wicked gem to create a multistep from

Heres the view:

<%= render layout: 'form' do |f| %>

<% for holiday in Holiday.find(:all) %>
 <label class="checkbox">
  <%= check_box_tag "user[holiday_ids][]", holiday.id, @user.holidays.include?(holiday) %>
  <%= holiday.name %>
</label>

Heres the rendered html (the form part anyway):

<form accept-charset="UTF-8" action="/user_steps/interests" class="edit_user" id="edit_user_3"     method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="lub8Fb5pvkxwgb3hGT66U14QBNKLOLfEwaLLw9Ts2WU=" /></div>


<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="1" />
 New Years Day
</label>

<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="2" />
 Valentine Day
</label>

<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="3" />
 Easter
</label>

<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="4" />
 Mother Day
</label>

<label class="checkbox">
  <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="5" />
  Father's Day
</label>

<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="6" />
 Halloween
</label>

<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="7" />
 Thanksgiving
</label>

<label class="checkbox">
  <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="8" />
  Christmas

Thanks!

Answer 1

This is the simplest method I have come up.

1. Ensure that you have jquery and jquery-ujs in your application.js file.

//= require jquery
//= require jquery-ujs

(Make sure that you have the Jquery gems installed in your gemfile as well.)

2. Add a script tag at the bottom of your form.

<script>
$("#id_of_checkbox").click(function(){
    $('div#id_of_html_element').toggle();
})
</script>

3. Make sure your id's are correct based off of what you want to toggle. I'll post an updated JS function I am going to write to make this easier.

Update: I made this into a simple function, which you could put in any JS file if you wanted to store this in the Rails-type place.

<script>
function showHiddenOptions(info_id) {
        $('#' + info_id).toggle();
    }
</script>

Then, add this to the input that you want to have this functionality: onclick: "showHiddenOptions('ID_OF_OPTIONS')"

Make sure you have the parentheses correct as well, as this is important for the function to see this information properly!

Answer 2

Hiya demo http://jsfiddle.net/z862m/ and from you site link provided solution is here: http://jsfiddle.net/2UfBy/

So the demo will do what you mentioned. i.e. WHen the checkbox is ticked the corresponding div will show and when unchecked it won't. B-)

[quote] When certain checkboxes are selected i need a div to appear below it that collects more information.. For example: the user checks "anniversary" and a div below it appears asking for the date...[unquote] :)

Jquery code

$(".checkbox").click(function(){

   $(this).next("div").toggle();    

});​

Html

<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="2" />
 Valentine Day
</label>
<div style="display:none;">
    Whatever you have to capture here<input type="text" id="foo" />
</div>
</br>
<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="3" />
 Easter
</label>
<div style="display:none;">
    Whatever you have to capture here<input type="text" id="foo1" />
</div>
</br>
<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="4" />
 Mother Day
</label>
<div style="display:none;">
    Whatever you have to capture here<input type="text" id="foo2" />
</div>
</br>
<label class="checkbox">
  <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="5" />
  Father's Day
</label>
<div style="display:none;">
    Whatever you have to capture here<input type="text" id="foo3" />
</div>
</br>
<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="6" />
 Halloween
</label>
<div style="display:none;">
    Whatever you have to capture here<input type="text" id="foo4" />
</div>
</br>
<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="7" />
 Thanksgiving
</label>
</br>
<label class="checkbox">
  <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="8" />
  Christmas
</label>​

Answer 3

JQuery is a good way to do it. You need the appropriate require statements in your application.js file to use JQuery

//= require jquery.js

An easy way to pull it off would be to surround everything you want to show and/or hide with a span tag, and then use JQuery to trigger the show/hide on your span tag from your *.js.erb file

You can use the following respond_with block to specify a format.js (javascript) response. The code goes in your controller's method name matching the form's name:

def hide_show_form
  respond_with do |format|
    format.js
  end
end

This will cause hide_show_form.js.erb to run first, before the HTML in your hide_show_form.html.erb ever renders.

hide_show_form.js.erb

$('span#hide_and_show').hide();  // hide the appropriate span tag right away 
function showHiddenForm() {      // this can be triggered using :onclick
    if ($('span#hide_and_show').css('display') == 'none') {
        $('span#hide_and_show').show();
    } else {
        $('span#hide_and_show').hide();
    }
}

hide_show_form.html.erb

<%= check_box_tag(:hide_show_checkbox, "hide_show_checkbox", false, :onclick=>"showHiddenForm();") %>
<span id="hide_and_show">
    <%= label_tag(:optional_data, "You might not always see this field:") %>&nbsp&nbsp
    <%= text_field_tag(:optional_data) %>
</span>

This example specifies an :onclick property of a check_box_tag to call a JavaScript function, showHiddenForm() in the js.erb file.

Answer 4

I think you should do something like

  if( $(#check_box_id).is(':checked')) {      
          $("#div_id").show();        
     } else {         
          $("#div_id").hide();        
   }         

This is not the perfect code but you coud do it with .hide() and .show() method.
I hope this will help you.
Thanks.