3

This is a Theming/UI question for CiviCRM.

1

I've done some theming to turn the radiobutton's into clickable options.

enter image description here

When I select an amount it updates the 'Regular Amount' field.

enter image description here

However, when I select other amount, the previous option stays selected and they are added together.

What jQuery/js can I use to make the 'Other Amount' field de-select/unset the contribution amount choice?

I've tried code like this but for the life of me I can not get it to deselect anything!

$( "#price_78" ).focus(function() {
$('#CIVICRM_QFID_408_2').prop('checked', false);
});

Can you help me come up with a viable solution? We do not want to use the 'None' field on the contribution amount. I tried SimpleDonate but it did not work well for our implementation. We want the focus of the 'Other Amount' field to deselect any contribution amount.

2

This code worked for me:

CRM.$(function($) {
  $('input[type=text]', '#priceset').on('keyup', function() {
    if ($(this).val()) {
      $('input[type=radio]:checked', '#priceset').prop('checked', false).each(function() {
        calculateRadioLineItemValue(this);
      });
      calculateText(this);
    }
  });
  $('input[type=radio]', '#priceset').on('change', function() {
    if ($(this).is(':checked')) {
      $('input[type=text]', '#priceset').val('').each(function() {
        calculateText(this);
      });
    }
  });
});
  • Coleman, your code works, but it does not visually "deselect" the contribution amount radio button on my form. The price calculates correctly, however. Is this how you experience it? – Zachary Nov 11 '17 at 0:00
  • I have no idea how you styled those buttons, so can't comment. It works on normal radio buttons. – Coleman Nov 11 '17 at 3:05
  • You are right, it's my theme! Answer accepted. – Zachary Nov 11 '17 at 3:37
1

I have a contribution form layout similar to Coleman's that shows clickable amounts (pseudo-buttons) instead of visible radio buttons. It also has the "Other Amount" pseudo-button (see below).

In order to get the right behavior, I had to also trigger the click() event on the radio button for the "Other Amount". This then correctly updated all the visual styles. The javascript is below.

contribution buttons and other amount input

CRM.$(function($) {
  // check for "other amount" text input
  var inpTxt = $('input[type=text]', '#priceset');
  if (!inpTxt.length) { return; }
  // find "Other Amount" radio button
  var rbO = $(":radio[value='0']", '#priceset');

  inpTxt.on('keyup', function() {
    if ($(this).val()) {
      $('input[type=radio]:checked', '#priceset').not(rbO).prop('checked', false).each(function() {
        calculateRadioLineItemValue(this);
      });
      // click event is needed to update style for other amounts
      rbO.not(':checked').click();
      calculateText(this);
    }
  });
  $('input[type=radio]', '#priceset').not(rbO).on('change', function() {
    if ($(this).is(':checked')) {
      inpTxt.val('').each(function() {
        calculateText(this);
      });
    }
  });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.