CODEWITHSUNDEEP
javascriptjquery
jagmitg
jagmitg

Reputation: 4546

Auto select based on number value

I am attempting to create a donations form but i am failing at the custom enter amount field.

I have predefined select option which the user can select 5, 7 and 14 but a custom field.

What i want to achieve:

If someone enters more than 14 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.

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>

Upvotes: 1

Views: 67

Answers (3)

talaub
talaub

Reputation: 187

In the on-key-up-method after you get the dollarvalue you could use this to check the radio button that has the input-value as a value:

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

Upvotes: 0

prasanth
prasanth

Reputation: 22500

Try with each() function of jquery

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

Upvotes: 0

RJParikh
RJParikh

Reputation: 4166

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

Upvotes: 1

Related Questions