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

user_3014248 0
Viewed 267
<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>​

enter image description here

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.

validation html jquery
2 Answers

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>

user_106064000

Here is a demo with checkboxes that might be easier to understand as you can uncheck to see the button disappear again:

$(".crm-submit-buttons").hide(); // hides button on load 

$('.crm-form-radio').on('click', function() {
  if ($('.payment_options-group').length > 0 && $('.crm-form-radio:checked').length) {
    $(".crm-submit-buttons").show();
  } else {
    $(".crm-submit-buttons").hide();
  }
})
fieldset{
  width: 200px;
}

button {
  margin-top: 10px;
  border-radius: 4px;
  background: lightblue;
  display: inline-block;
  padding: 5px 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="payment_options-group">
  <input class="crm-form-radio" value="5" type="checkbox" name="payment_processor_id">
  <input class="crm-form-radio" value="3" type="checkbox" name="payment_processor_id">
</fieldset>

<div class="crm-submit-buttons"><button>Button</button></div>

user_148978540
Related