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 plex. 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!

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 plex. 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!

• javascript
• jquery
• ruby-on-rails
• checkbox

• Sorry to ask this question, I don't ruby-on-rails. But where is the checkbox in the html code – sanjeev Commented Feb 19, 2014 at 9:17
• It's this bit '<div class="form-group" id="checkbox"> <%= f.check_box :paydeliver %> <%= f.label :paydeliver, "Pay $25" %> </div>' – james Commented Feb 19, 2014 at 9:18
• but you are assigning 'id' to div & not checkbox – sanjeev Commented Feb 19, 2014 at 9:20
• 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 Commented Feb 19, 2014 at 18:08

3 Answers 3

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/D46Zb/

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();

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";
     }
    });
});