Show / hide div on page load depending on radio button value - Jquery and Ruby on Rails Simple Form

Question

Using Jquery with Ruby on Rails and the Simple Form Gem I can successfully show / hide a div on changing a radio button, however despite numerous attempts I can't get this to work on page load - divs are always showing, whether the radio button is true or false. Any help would be great thanks.

jQuery(document).ready(function() {
  jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
    if (jQuery(this).val() == 'true' ) {
      jQuery('#denied-quote-one').hide();
    } else {
      jQuery('#denied-quote-one').show();
   }
  });
});

UPDATE - HTML OUTPUT OF RADIO BUTTONS:

<div class="form-group radio_buttons optional user_nurse_qualified">
   <input type="hidden" name="user[nurse_attributes][qualified]" value="">
     <span class="radio">
        <label for="user_nurse_attributes_qualified_true">
            <input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
        </label>
      </span>
      <span class="radio">
        <label for="user_nurse_attributes_qualified_false">
           <input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
        </label>
       </span>
   </div>

  <div id="denied-quote-one" style="display: block;">
    <p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
    </p>
  </div>

This code is only fired on change event of the radio button — Chava Geldzahler
– Chava Geldzahler, Commented Jun 26, 2017 at 19:00
I know but my question is, how do I make it fire on page load? I tried pageload in place of change and it has no effect. — DanRio
– DanRio, Commented Jun 26, 2017 at 19:04

Chava Geldzahler · Accepted Answer · 2019-10-28 00:25:50Z

2

Your code above adds an event handler for the change event on the radio button. Aside from that, you need to check the value of the :checked radio button on page load, and show/hide based on that.

Note: To prevent flickering, give the element an initial style of display: none.

jQuery(document).ready(function() {

	if ( jQuery('[name="user[nurse_attributes][qualified]"]:checked').val() !== 'true' ) {
		jQuery('#denied-quote-one').show();
	}
  	
  	jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
    	if (jQuery(this).val() == 'true' ) {
      		jQuery('#denied-quote-one').hide();
    	} else {
      		jQuery('#denied-quote-one').show();
   		}
  	});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group radio_buttons optional user_nurse_qualified">
   <input type="hidden" name="user[nurse_attributes][qualified]" value="">
     <span class="radio">
        <label for="user_nurse_attributes_qualified_true">
            <input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
        </label>
      </span>
      <span class="radio">
        <label for="user_nurse_attributes_qualified_false">
           <input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
        </label>
       </span>
   </div>

  <div id="denied-quote-one" style="display: none;">
    <p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
    </p>
  </div>

edited Oct 28, 2019 at 0:25

answered Jun 26, 2017 at 19:06

Chava Geldzahler

3,7501 gold badge20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DanRio Over a year ago

Thanks for your answer. I'd actually tried what you mentioned before but on page load the div is still showing, thought it must of been something wrong with my code at the time. Maybe it's something else causing it? Will continue to look into it.

DanRio Over a year ago

On page load it doesn't seem to register the true value, very strange.

Chava Geldzahler Over a year ago

Can you post the radio button HMTL?

DanRio Over a year ago

Added to my question

Chava Geldzahler Over a year ago

Updated my answer - You want the value of the radio button that is :checked

Collectives™ on Stack Overflow

Show / hide div on page load depending on radio button value - Jquery and Ruby on Rails Simple Form

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related