Ruby Rails - optional form input shown conditional on checkbox

Question

I am working on a dynamic form input display where if the users clicks something to show "advanced options" in the form, the input vectors will be displayed, but otherwise (the default) they will not be shown. I have the following pieces in my form partial:

UPDATED 1x:

<div class="form-inputs">
    <%= f.input :message, label: 'Write message'%>
</div>

<div class="form-inputs">
  <%= f.check_box :advanced, {}, :id => "advancedbox" %>
</div>

<div class="form-inputs" id="advancedopts" style="display:none;">          
  <%= f.input :startdatetime, label: 'Specify', :as => :datetime_picker %>
  <%= f.input :expirationdatetime, label: 'Specify', :as => :datetime_picker %>
</div>

And the JS in the head of the form partial:

UPDATED 1x:

<head><script type="text/javascript">
var checkbox = document.getElementById('advancedbox');
checkbox.onchange = function() {
if (checkbox.checked) {
      document.getElementById("advancedopts").style.display = "block;";
  } else {
      document.getElementById("advancedopts").style.display = "none;";
  }
}
</script></head>

I took the inspiration for this from the following post: show rest of a form if a checkbox is ckecked in ruby on rails

But I cannot get it to work: the checkbox shows, but clicking it on or off does not show my advanced form inputs. Can anyone help me debug?

Thanks!!

Is the problem that you've not got a listener for the event? The JS seems like it would be evaluated when the page loads but then changes to the DOM thereafter would be ignored. — Alex Lynham, Dec 31 '13 at 19:04

Alex Lynham · Answer 1 · 2014-01-01T10:01:00.337

2

Your problem is that there is no event being listened for. In the example you linked, checkbox.onchange is an event that triggers a function (action) that displays the div. As yours is all namespaced within a function with no event to fire it, nothing happens as it is not evaluated when the state of your checkbox changes.

So if you move the line

var checkbox = document.getElementById('advancedbox');

outside your show function and then key the onchange event to that variable as in the example you linked, it should work.

EDIT: jQuery solution...

$(document).ready(function(){
  $("#advancedbox").change(function(){
    if( $(this).is(':checked') ){
      $('#advancedopts').show(); // you could instead animate using .fadeIn() or .slideDown() if that was preferable
    } else {
      $('#advancedopts').hide(); // ditto above, using .fadeOut(), .slideUp() etc.
    }
  });
});

edited Jan 01 '14 at 10:01

answered Dec 31 '13 at 19:06

Alex Lynham

1,318
2
11
29

Hi--thanks so much for your help & explaining the listener & event. I have updated my post to reflect what I have changed. I am still getting the same issue--page renders, I can check and uncheck the box, but no result. – SOConnell Dec 31 '13 at 20:25
I think the problem might be in the lines for your if & else: try using the format `document.getElementById("advancedopts").style['display'] = 'block';` Does that help? – Alex Lynham Dec 31 '13 at 21:45
If that does not work then it might be that you have to declare it as a variable first, so maybe declare it as `var advancedbox = document.getElementById("advancedopts");` and then chain it thus: `advancedbox.style['display'] = 'block';` – Alex Lynham Dec 31 '13 at 21:46
Alex---Thanks. Some of this did get me closer. I ended up revising my search terms and coming up with this, which is a simpler solution (just a button to call a JS) & works for me: http://stackoverflow.com/questions/16132383/changing-div-visibility-with-javascript – SOConnell Dec 31 '13 at 22:45

score 1 · Answer 2 · answered Dec 31 '13 at 18:28

1

Your problem is here:

<div class="form-inputs" name="advancedopts" style="display:none;">

Changing the name attribute to id should do the trick:

<div class="form-inputs" id="advancedopts" style="display:none;">

answered Dec 31 '13 at 18:28

elektronaut

2,547
1
18
11

Thanks for your quick response. I made that change but it still isn't working. I am working on Win7 with Rails 3. Not sure if that helps. The page loads, I can see and click the checkbox, but the rest doesn't pop up (not getting any errors at least). Is it ok for the default `style="display...` to be hard-coded as none like that & not referencing some variable that can be changed by the JS? – SOConnell Dec 31 '13 at 18:39

score 0 · Accepted Answer · edited May 23 '17 at 11:49

0

Because I do not need to save the user selection, I use the following which works well for my purposes (inspired by changing DIV visibility with JavaScript):

in form partial:

<input type="button" value="Show advanced" onClick="show()">
<div class="form-inputs" id="advancedopts">
... </div>

in application.js:

function show(){
  document.getElementById("advancedopts").style.visibility= 'visible' ;
}

in scaffolds.css:

#advancedopts{
 visibility:hidden;
}

And works sufficiently for me without the use of a listener. Just in case anyone has a similar simple need and starts off on a track-more-complicated-than-necessary like me.

edited May 23 '17 at 11:49

Community

1
1

answered Dec 31 '13 at 22:49

SOConnell

793
1
8
27

It's generally considered bad form to inline JavaScript into html elements like this, if you're having trouble using raw JS, then I recomment reading up on jQuery. I'll update my answer with a jQuery solution. – Alex Lynham Jan 01 '14 at 09:55

Ruby Rails - optional form input shown conditional on checkbox

3 Answers3