Answers.Body: <p>This code worked for me:</p>
  
  <pre><code>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);
        });
      }
    });
  });
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-11-11T00:00:13.220Z
Answers.Text: 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?
Answers.UserDisplayName: Zachary
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-11-11T03:05:25.723Z
Answers.Text: I have no idea how you styled those buttons, so can't comment. It works on normal radio buttons.
Answers.UserDisplayName: Coleman
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-11-11T03:37:29.223Z
Answers.Text: You are right, it's my theme! Answer accepted.
Answers.UserDisplayName: Zachary
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-11-10T14:21:35.950Z
Answers.LastActivityDate: 2017-11-10T14:21:35.950Z
Answers.UserDisplayName: Coleman
Answers.Body: <p>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).</p>
  
  <p>In order to get the right behavior, I had to also trigger the <code>click()</code> event on the radio button for the "Other Amount". This then correctly updated all the visual styles. The javascript is below.</p>
  
  <p><a href="https://i.sstatic.net/ErVcp.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/ErVcp.png" alt="contribution buttons and other amount input"></a></p>
  
  
  
  <pre><code>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);
        });
      }
    });
  });
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-01-20T07:51:33.273Z
Answers.LastActivityDate: 2019-01-20T07:51:33.273Z
Answers.UserDisplayName: Martin_W
Body: <p>This is a Theming/UI question for CiviCRM.</p>
  
  <p><a href="https://i.sstatic.net/GEltX.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/GEltX.jpg" alt="1"></a></p>
  
  <p>I've done some theming to turn the radiobutton's into clickable options.</p>
  
  <p><a href="https://i.sstatic.net/sLvp5.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/sLvp5.jpg" alt="enter image description here"></a></p>
  
  <p>When I select an amount it updates the 'Regular Amount' field.</p>
  
  <p><a href="https://i.sstatic.net/22uis.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/22uis.jpg" alt="enter image description here"></a></p>
  
  <p>However, when I select other amount, the previous option stays selected and they are added together.</p>
  
  <p>What jQuery/js can I use to make the 'Other Amount' field de-select/unset the contribution amount choice? </p>
  
  <p>I've tried code like this but for the life of me I can not get it to deselect anything!</p>
  
  <pre><code>$( "#price_78" ).focus(function() {
  $('#CIVICRM_QFID_408_2').prop('checked', false);
  });
  </code></pre>
  
  <p>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.</p>
  
Tags: <civicontribute><javascript><jquery>
Title: Civicontribute radiobuttons without "none", where the "Other" contribution field deselects radiobuttons
ThreadText: # Civicontribute radiobuttons without "none", where the "Other" contribution field deselects radiobuttons
  
  (Asked by: username_0 on 2017-11-08)
  
  This is a Theming/UI question for CiviCRM.
  
  [![1](https://i.sstatic.net/GEltX.jpg)](https://i.sstatic.net/GEltX.jpg)
  
  I've done some theming to turn the radiobutton's into clickable options.
  
  [![enter image description here](https://i.sstatic.net/sLvp5.jpg)](https://i.sstatic.net/sLvp5.jpg)
  
  When I select an amount it updates the 'Regular Amount' field.
  
  [![enter image description here](https://i.sstatic.net/22uis.jpg)](https://i.sstatic.net/22uis.jpg)
  
  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.
  
  **Tags:** civicontribute, javascript, jquery
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2017-11-10. Score: 2 | Accepted answer
  
  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);
        });
      }
    });
  });
  
  ```
  
  > **Comments:**
  > **username_0**: username_1, 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?  
  > **username_1**: I have no idea how you styled those buttons, so can't comment. It works on normal radio buttons.  
  > **username_0**: You are right, it's my theme! Answer accepted.  
  
  ---
  
  ### Answer by username_2 on 2019-01-20. Score: 1
  
  I have a contribution form layout similar to username_1'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](https://i.sstatic.net/ErVcp.png)](https://i.sstatic.net/ErVcp.png)
  
  ```
  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);
        });
      }
    });
  });
  
  ```
  
  
  ---
  
  