根据数值自动选择

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);
});

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

检查以下代码：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在获得dollarvalue后的on-key-up-method中，您可以使用它来检查具有输入值的单选按钮作为值：

$('input[type=radio]').each(function () {
    if ($(this).val() == dollarinput)
        $(this).prop("checked", true);
});

Answer 3

尝试使用jquery的each()函数

$('.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 = parseFloat($(this).val());
    $('.amount input[type=radio]').prop('checked', false);
   $('.amount input[type=radio]').each(function(){
         if(parseFloat($(this).val()) == dollarAmount ){
         $(this).prop('checked', true);
         }
         else{
         console.log('is not in this list')
         }
    })
});

<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>