Show rest of form if checkbox is checked

Question

I reviewed a couple of different SO answers (show rest of a form if a checkbox is ckecked in ruby on rails), but none have worked for me.

There are other answers, but I'm not sophisticated at jQuery or JS, and the rest are very hypothetical. In either case, I've followed the example answers on the linked question perfectly, but still, when the checkbox is checked, the rest of the form is not appearing.

Thoughts?

Body

      <div class="form-group" id="checkbox">
        <%= f.check_box :paydeliver %>
        <%= f.label :paydeliver, "Pay $25" %>
      </div>

      <div id="delivery" style="display:none;">
        <div class="form-group">
          <%= f.label :addysdeliver, "Delivery address"%>
          <%= f.text_field :addysdeliver, class: "form-control"%>
        </div>
      </div>

      <%= f.submit "Go!", class: "btn btn-primary btn-large btn-block" %>

      <% end %> #end of form

Scripts that I have tried (from linked SO answer)and have failed... Feel free to improve on any or all of them!

<script>
window.onload = function() { 
 var checkbox = document.getElementById('checkbox');
 if (checkbox.checked) {
 document.getElementById("delivery").style.display = "block";
 } else {
 document.getElementById("delivery").style.display = "none";
 }
};

<script>
window.onload = function() { 
var checkbox = document.getElementById('checkbox');
var delivery_div = document.getElementById('delivery');
checkbox.change = function() {
   if(this.checked) {
     delivery_div.style['display'] = 'block';
   } else {
     delivery_div.style['display'] = 'none';
   }
};

<script>
$('select#paydeliver').change ->
  if $(this).val() == 'true'
    $('delivery').slideDown('fast')
  else
    $('delivery').slideUp('fast')

<script>
$("input[type='checkbox']#paydeliver").on('change', function(){
$('delivery').toggle();
});
</script>

Note that for each method above, I also tried adding a # symbol in front of the ID element, for example ('#delivery') instead of ('delivery'). Still no luck!

EDIT

@emilioicai definitely got the answer to the question right, but in doing so, also made me realize something more complex. Per controller, right after this form is posted, users are redirected to the edit view, so that if they wish, they can make changes. All the data in the form that they just entered persists into the edit view (included the checked box) except the field that is supposed to appear if the box is checked.

This is why I was trying to change if (condition) in JS to be based on whether or not the checked box was showing "True" rather than having it just be checked. Additional thoughts appreciated!

Sorry to ask this question, I don't ruby-on-rails. But where is the checkbox in the html code — sanjeev, Feb 19 '14 at 09:17
It's this bit '
<%= f.check_box :paydeliver %> <%= f.label :paydeliver, "Pay $25" %>
' — james, Feb 19 '14 at 09:18
Hi James, if you want to do that you can extract the functionality into a separate function and call it not only on click but also on pagload. Take a look at my second answer, if it works for you it would be nice if you could check it as the correct answer or upvote it. Thanks! — Emilio Rodriguez, Feb 19 '14 at 18:08

score 2 · Answer 1 · answered Feb 19 '14 at 09:21

2

There are several wrong things there. Main one is that the id should be in the checkbox. not in the div. Something like this:

  <div class="form-group">
    <input id="checkbox" type="checkbox">
  </div>

  <div id="delivery" style="display:none;">
    <div class="form-group">
      HIDDEN
    </div>
  </div>



var checkbox = document.getElementById('checkbox');
var delivery_div = document.getElementById('delivery');
checkbox.onclick = function() {
   if(this.checked) {
     delivery_div.style['display'] = 'block';
   } else {
     delivery_div.style['display'] = 'none';
   }
};

see it working here: http://jsfiddle.net/D46Zb/

answered Feb 19 '14 at 09:21

Emilio Rodriguez

5,709
4
27
32

OH of course, and thanks @sanjeev as well. My only question is, do you know how to get the ID to be checkbox in the context of a Rails form helper? Using Rails form helper is the only way I've been taught to assign the output of the checkbox to the variable (in this case :paydeliver) – james Feb 19 '14 at 09:23
try this: f.check_box :paydeliver, :id => "checkbox" – Emilio Rodriguez Feb 19 '14 at 09:26
That was perfect thanks! One more follow up if you have a second, if I wanted to not use the onclick, but instead actually tell the javascript to just check if checkbox = true (i.e., clicked), could I just delete teh onclick line and change the if to be if checkbox = true? – james Feb 19 '14 at 09:35
You would have 2 problems there: 1. if you remove the onclick the if would be only executed once (on load) and since the checkbox is not checked by default, it would never show the hidden div. and 2. checkbox is a dom element so you cannot really use it directly to check its value but you should use the .checked attribute on it instead – Emilio Rodriguez Feb 19 '14 at 09:49
your solution definitely worked, but it made me realize it only solved part of my problem. After this form is posted, users are redirected to the edit view. All other fields, including whether or not the checkbox was checked, persists through, but if the checkbox is checked, the field that was invisible does not stay visible (though of course, the data is still there and if I uncheck and re-check I can see the input). Any idea on how to make this stick? This is why I was trying to anchor on the truthyness of the checkbox, so then it wouldn't depend on click or change actions. – james Feb 19 '14 at 17:35

score 0 · Answer 2 · answered Feb 19 '14 at 12:49

If you want to check it only once when page loads then use

<script type="text/javascript">

    window.onload = function() {
     if ($('checkbox').is('checked')) {
        document.getElementById("delivery").style.display = "block";
     } else {
        document.getElementById("delivery").style.display = "none";
     }
    };

else if you want to check every time clicked on checkbox-

 <script type="text/javascript">
  $(document).ready(function(){
    $('checkbox').click(function(){ 
     if ($('checkbox').is('checked')) {
        document.getElementById("delivery").style.display = "block";
     } else {
        document.getElementById("delivery").style.display = "none";
     }
    });
});

The latter would be more ideal, but I can't get the code to work? Also, I've edited the question: After this form is posted, users are redirected to the edit view. All other fields, including whether or not the checkbox was checked, persists through, but if the checkbox is checked, the field that was invisible does not stay visible (though of course, the data is still there and if I uncheck and re-check I can see the input). Any idea on how to make this stick? This is why I was trying to anchor on the truthyness of the checkbox, so then it wouldn't depend on click or change actions. — james, Feb 19 '14 at 17:35

score 0 · Accepted Answer · answered Feb 19 '14 at 18:06

This will make it persist:

  <div class="form-group">
    <input id="checkbox" type="checkbox">
  </div>

  <div id="delivery" style="display:none;">
    <div class="form-group">
      HIDDEN
    </div>
  </div>



var checkbox = document.getElementById('checkbox');
var delivery_div = document.getElementById('delivery');
var showHiddenDiv = function(){
   if(checkbox.checked) {
     delivery_div.style['display'] = 'block';
   } else {
     delivery_div.style['display'] = 'none';
   } 
}
checkbox.onclick = showHiddenDiv;
showHiddenDiv();

that worked like a charm, and i also understand the explanation about calling the function when the checkbox is clicked and also whenever the page is loaded, thanks so much! — james, Feb 19 '14 at 21:22

Show rest of form if checkbox is checked

3 Answers3