html - How to show or hide a div if the div is present and has a value

Question

<fieldset class=?"crm-public-form-item crm-group payment_options-group" style=?"display:? block !important;? visibility:? visible;?">?
<div class=?"crm-public-form-item crm-section payment_processor-section" style=?"display:? block;?">?
  <div class=?"content">    
    ?<input class=?"payment_processor_1 crm-form-radio" value=?"5" type=?"radio" id=?"CIVICRM_QFID_5_payment_processor_id" name=?"payment_processor_id">    
    <input class=?"payment_processor_2 crm-form-radio" value=?"3" type=?"radio" id=?"CIVICRM_QFID_3_payment_processor_id" name=?"payment_processor_id">?
  </div>?
 </div>?
</fieldset>?

<div id=?"crm-submit-buttons" class=?"crm-submit-buttons" style=?"visibility:? visible;? display:? block;?">
?  <button class=?"crm-form-submit default validate crm-button crm-button-type-upload crm-button_qf_Main_upload" value=?"1" type=?"submit" name=?"_qf_Main_upload" id=?"_qf_Main_upload-bottom">?…?</button>?
</div>?

I have this html block and I am bit stuck with validation. Conditions are

• payment_options-group fieldset must present on this page
• And at least one of the radio button is checked
• Then show crm-submit-buttons div
• Otherwise hide crm-submit-buttons div

I have tried the following but could not get it to work, also not sure how to define the condition payment_options-group fieldset must present on this page. This is important because "crm-submit-buttons" is controlled by other fieldset, which is not present on this page.

     if( $("#payment_options-group").val().length === 1 ) {
     $("div#crm-submit-buttons").show();
     }
else {
$("div#crm-submit-buttons").hide();
}

Any help would be appreciated. Thanks in advance.

Answer 1

You can check if the length is > 0 then checkbox is checked and fieldsets is present depending on this show or hide div .

Demo Code :

console.log($(".payment_options-group").length + "--length of fielset")
console.log($("input[name=payment_processor_id]:checked").length + "--length of chekd")
//check if fieldset is prsent and checked length if > 0
if (($(".payment_options-group").length > 0) && ($("input[name=payment_processor_id]:checked").length > 0)) {
  $("div#crm-submit-buttons").show();
} else {
  $("div#crm-submit-buttons").hide();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="crm-public-form-item crm-group payment_options-group" style="display:block !important; visibility: visible;">
  <div class="crm-public-form-item crm-section payment_processor-section" style="display:block;">
    <div class="content">
      <input class="payment_processor_1 crm-form-radio" value="5" type="radio" id="CIVICRM_QFID_5_payment_processor_id" name="payment_processor_id">
      <input class="payment_processor_2 crm-form-radio" value="3" type="radio" id="CIVICRM_QFID_3_payment_processor_id" name="payment_processor_id" checked>
    </div>
  </div>
</fieldset>

<div id="crm-submit-buttons" class="crm-submit-buttons" style="visibility:visible; display:block;">
  <button class="crm-form-submit default validate crm-button crm-button-type-upload crm-button_qf_Main_upload" value="1" type="submit" name="_qf_Main_upload" id="_qf_Main_upload-bottom">?…</button>
</div>