title: Auto select based on number value
body: <p>I am attempting to create a donations form but i am failing at the custom enter amount field.</p>
  
  <p>I have predefined select option which the user can select 5, 7 and 14 but a custom field.</p>
  
  <p><strong>What i want to achieve:</strong></p>
  
  <p>If someone enters <strong>more than 14</strong> in the custom field, it should accept it, if they enter in an amount which is already in the predefined list, it should select the button, if they enter in an amount which is not in that list, it should just prompt an alert.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form class="donate" novalidate="" autocomplete="on" method="POST"&gt;
    &lt;div&gt;
      &lt;input type="radio" name="amount" id="amount_3" value="3" tabindex="10"/&gt;
      &lt;label for="amount_3"&gt;£3&lt;/label&gt;    
    &lt;/div&gt;
    &lt;div&gt;
      &lt;input type="radio" name="amount" id="amount_5" value="5" tabindex="10"/&gt;
      &lt;label for="amount_5"&gt;£5&lt;/label&gt;    
    &lt;/div&gt;
    &lt;div&gt;
      &lt;input type="radio" name="amount" id="amount_10" value="10" tabindex="50"/&gt;
      &lt;label for="amount_10"&gt;£10&lt;/label&gt;    
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for="amount_other"&gt;Enter Other Amount&lt;/label&gt;
      &lt;input type="tel" name="amount_other" id="amount_other" placeholder="Enter Other Amount" tabindex="18"/&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;input type="checkbox" name="amount_reoccuring" id="amount_reoccuring"/&gt;
      &lt;label for="amount_reoccuring"&gt;&lt;span&gt;&lt;/span&gt;  Make this a reoccuring donation.&lt;/label&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>$('form').submit(function (e) {
      e.preventDefault();
  });
  
  $('.amount label').on('click', function () {
      var dollarAmount = parseInt($(this).text().replace('£', ''), 10);
      var impactAmount = parseInt(dollarAmount / 10, 10);
  
      $('.impact-amount').text('£' + dollarAmount);
      $('#amount_other').val('');
  });
  
  $('#amount_other').keyup(function () {
      var dollarAmount = $(this).val();
      var impactAmount = parseInt(dollarAmount / 10, 10);
  
      $('.impact-amount').text('£' + dollarAmount);
      $('.amount input[type=radio]').prop('checked', false);
  });
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.amount label').on('click', function () {
      var dollarAmount = parseInt($(this).text().replace('£', ''), 10);
      var impactAmount = parseInt(dollarAmount / 10, 10);
  
      $('.impact-amount').text('£' + dollarAmount);
      $('#amount_other').val('');
  });
  
  $('#amount_other').keyup(function () {
      var dollarAmount = $(this).val();
      var impactAmount = parseInt(dollarAmount / 10, 10);
  
      $('.impact-amount').text('£' + dollarAmount);
      $('.amount input[type=radio]').prop('checked', false);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form class="donate" novalidate="" autocomplete="on" method="POST"&gt;
    &lt;div class="amount"&gt;
      &lt;input type="radio" name="amount" id="amount_5" value="5" tabindex="10"/&gt;
      &lt;label for="amount_5"&gt;£5&lt;/label&gt;    
    &lt;/div&gt;
    &lt;div class="amount"&gt;
      &lt;input type="radio" name="amount" id="amount_7" value="7" tabindex="10"/&gt;
      &lt;label for="amount_7"&gt;£7&lt;/label&gt;    
    &lt;/div&gt;
    &lt;div class="amount"&gt;
      &lt;input type="radio" name="amount" id="amount_14" value="14" tabindex="50"/&gt;
      &lt;label for="amount_14"&gt;£14&lt;/label&gt;    
    &lt;/div&gt;
    &lt;div class="amount"&gt;
      &lt;label for="amount_other"&gt;Enter Other Amount&lt;/label&gt;
      &lt;input type="tel" name="amount_other" id="amount_other" placeholder="Enter Other Amount" tabindex="18"/&gt;
    &lt;/div&gt;
    &lt;div class="amount"&gt;
      &lt;input type="checkbox" name="amount_reoccuring" id="amount_reoccuring"/&gt;
      &lt;label for="amount_reoccuring"&gt;&lt;span&gt;&lt;/span&gt;  Make this a reoccuring donation.&lt;/label&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>