CODEWITHSUNDEEP
javascriptjqueryruby-on-railscheckbox
james
james

Reputation: 4047

Show rest of form if checkbox is checked

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!

Upvotes: 0

Views: 10875

Answers (3)

Emilio Rodriguez
Emilio Rodriguez

Reputation: 5749

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

Upvotes: 0

Mandeep Singh
Mandeep Singh

Reputation: 1003

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

Upvotes: 0

Emilio Rodriguez
Emilio Rodriguez

Reputation: 5749

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/

Upvotes: 2

Related Questions