On CiviContribute forms within WP, the behavior of predefined amounts and an "Other Amount" input box is broken

Question

For CiviContribute forms in WordPress that have predefined fixed amounts ($25, $50, $100, ...) and that also allow an "Other" amount, it seems that the javascript that is supposed to clear the fixed amount radio buttons when an "other" amount is filled in is broken. I'm using Civi v.5.4.0 in WordPress v.4.9.9.

The malfunctioning behavior is also reported here, but the CMS is not indicated. A couple javascript solutions are posted— but this should work out of the box with Civi, right?

Looking under the covers, I see there are javascript functions clearAmountOther() and useAmountOther() that are wired to the onclick events for the radio buttons. However, the DOM structure the code refers to is invalid. There is no document.Main.amount_other.

function clearAmountOther() {
  var priceset = 0
  if( priceset ){
    cj(priceset).val('');
    cj(priceset).blur();
  }
  if (document.Main.amount_other == null) return; // other_amt field not present; do nothing
  document.Main.amount_other.value = "";
}

As a result, if you select a fixed amount like $25 and then enter $40 into the "Other Amount" box, the contribution is the sum $65. This is likely to surprise donors!

Is this a known issue? A bug that needs to be fixed?

Answer 1

I have experienced this behavior in two different situations. In one situation, the Contribution was using a manually created price set that mimicked the behavior of the contribution page with "Allow other amounts" checked. The javascript code is not added for these price sets since CiviCRM can't really tell how they are supposed to work. Switching the contribution page to use the amount options provided by the page itself instead of a price set should solve that problem.

However, in another case, the onclick event was not added because the price set value field's name was "Contribution_Amount" instead of "other_amount". I don't know why the price set value field's name was not created properly.

The code in question is in CRM/Price/BAO/PriceField.php:

if (!empty($qf->_quickConfig) && !empty($qf->_contributionAmount) && strtolower($fieldOptions[$optionKey]['name']) == 'other_amount') {
  $label .= '  ' . $currencySymbol;
  $qf->assign('priceset', $elementName);
  $extra = ['onclick' => 'useAmountOther();'];
}

I figured out which price field value record was the one being used and manually updated it with:

UPDATE civicrm_price_field_value SET name = 'other_amount' WHERE id = 934;

This isn't a great answer to your question - more of a work-around. Figuring out why the price field value record was added with the name set to "Contribution_Amount" would be better.