javascript - 根据数值自动选择

Question

我正在尝试创建捐赠表格，但我在自定义输入金额字段中失败了。

我有预定义的选择选项，用户可以选择 5、7 和 14，但有一个自定义字段。

我想要实现的目标:

如果有人在自定义字段中输入超过 14，它应该接受它，如果他们输入的数量已经在预定义列表中，它应该选择按钮，如果他们输入一个不在该列表中的金额，它应该只是提示一个警报。

HTML

<form class="donate" novalidate="" autocomplete="on" method="POST">
  <div>
    <input type="radio" name="amount" id="amount_3" value="3" tabindex="10"/>
    <label for="amount_3">£3</label>    
  </div>
  <div>
    <input type="radio" name="amount" id="amount_5" value="5" tabindex="10"/>
    <label for="amount_5">£5</label>    
  </div>
  <div>
    <input type="radio" name="amount" id="amount_10" value="10" tabindex="50"/>
    <label for="amount_10">£10</label>    
  </div>
  <div>
    <label for="amount_other">Enter Other Amount</label>
    <input type="tel" name="amount_other" id="amount_other" placeholder="Enter Other Amount" tabindex="18"/>
  </div>
  <div>
    <input type="checkbox" name="amount_reoccuring" id="amount_reoccuring"/>
    <label for="amount_reoccuring"><span></span>  Make this a reoccuring donation.</label>
  </div>
</form>

Jquery

$('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);
});

$('.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);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="donate" novalidate="" autocomplete="on" method="POST">
  <div class="amount">
    <input type="radio" name="amount" id="amount_5" value="5" tabindex="10"/>
    <label for="amount_5">£5</label>    
  </div>
  <div class="amount">
    <input type="radio" name="amount" id="amount_7" value="7" tabindex="10"/>
    <label for="amount_7">£7</label>    
  </div>
  <div class="amount">
    <input type="radio" name="amount" id="amount_14" value="14" tabindex="50"/>
    <label for="amount_14">£14</label>    
  </div>
  <div class="amount">
    <label for="amount_other">Enter Other Amount</label>
    <input type="tel" name="amount_other" id="amount_other" placeholder="Enter Other Amount" tabindex="18"/>
  </div>
  <div class="amount">
    <input type="checkbox" name="amount_reoccuring" id="amount_reoccuring"/>
    <label for="amount_reoccuring"><span></span>  Make this a reoccuring donation.</label>
  </div>
</form>

Answer 1

检查下面的代码:

$('.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 flag = 0;
    var dollarAmount = $(this).val();
    var impactAmount = parseInt(dollarAmount / 10, 10);
    $('.impact-amount').text('£' + dollarAmount);
    $('.amount input[type=radio]').prop('checked', false);
    
    $('input:radio').each(function () {
      if($(this).val() == dollarAmount)
      {
        flag = 1;
        $(this).prop('checked', true);
      }
    });
    
    if(flag == 0)
    {
      alert("Value in Custom Field : " + dollarAmount);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="donate" novalidate="" autocomplete="on" method="POST">
  <div class="amount">
    <input type="radio" name="amount" id="amount_5" value="5" tabindex="10"/>
    <label for="amount_5">£5</label>    
  </div>
  <div class="amount">
    <input type="radio" name="amount" id="amount_7" value="7" tabindex="10"/>
    <label for="amount_7">£7</label>    
  </div>
  <div class="amount">
    <input type="radio" name="amount" id="amount_14" value="14" tabindex="50"/>
    <label for="amount_14">£14</label>    
  </div>
  <div class="amount">
    <label for="amount_other">Enter Other Amount</label>
    <input type="tel" name="amount_other" id="amount_other" placeholder="Enter Other Amount" tabindex="18"/>
  </div>
  <div class="amount">
    <input type="checkbox" name="amount_reoccuring" id="amount_reoccuring"/>
    <label for="amount_reoccuring"><span></span>  Make this a reoccuring donation.</label>
  </div>
</form>