CODEWITHSUNDEEP
javascriptjqueryruby-on-railsruby
DanRio
DanRio

Reputation: 473

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

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>

Upvotes: 1

Views: 1213

Answers (1)

Chava Geldzahler
Chava Geldzahler

Reputation: 3730

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>

Upvotes: 2

Related Questions