Forum: Ruby on Rails Checkbox -> hide/show element

42a952b18b4985983b7964a447da7512?d=identicon&s=25 Patrick G. (randomuser)
on 2010-02-13 09:39
Hello,

this is probably an easy question: I have a checkbox and a datetime
field in a form. This is what I want to achieve:

1) in default mode the checkbox is unchecked and the datetime field is
hidden
2) when the user marks (clicks) the checkbox (so it is checked) the
datetime field is shown

This is what I have in my view (very close to it):

<% form_for(logentry, :url => @url, :method => @method) do |f| %>
  <%= f.error_messages %>
  <table>
[...]
    <tr><td class="key"><%= f.label :mycheckbox, "Remind me?"
%></td><td><%= f.check_box :mycheckbox %></td></tr>
   <tr id="hideshow"><td class="key"><%= f.label :remind_when,
"Date"%></td><td><%= datetime_select "logentry","remind_when", :default
=> Time.now %></td></tr>
  </table>
  <p>
    <%= f.submit submit_name %>
  </p>
<% end %>

Where should I sprinkle the javascript? Do I need to create another
action in my controller (show_element/hide_element) with rjs code? Or is
there something like onclick => "show element hideshow"?

Thanks

Patrick
42a952b18b4985983b7964a447da7512?d=identicon&s=25 Patrick G. (randomuser)
on 2010-02-13 12:24
I don't like self-answered posts...

I've found a solution. I have created a simple javascript:

<script type="text/javascript">
  function switchvisibility(el) {
    if (document.getElementById(el).checked) {
      document.getElementById('wvdatetime').style.display = "table-row";
    } else {
      document.getElementById('wvdatetime').style.display = "none";
    }
  }
</script>


my checkbox in the form has
:id => "thiselement", :onchange => "switchvisibility('thiselement')"

and the table row I want do hide has:
<tr id="wvdatetime" style="display: none;"> ....</tr>

That's it. I hope the solution is not too stupid.

Patrick
41a62edcdbf359a08425f5618c1a4385?d=identicon&s=25 ayupmeduck (Guest)
on 2010-02-14 13:16
(Received via mailing list)
That's fine, but Rails normally includes the prototype libs, so you
could have done it in one line:

:onclick => "ELEMENT_NAME.hide();return false"
Please log in before posting. Registration is free and takes only a minute.
Existing account

NEW: Do you have a Google/GoogleMail, Yahoo or Facebook account? No registration required!
Log in with Google account | Log in with Yahoo account | Log in with Facebook account
No account? Register here.