Troubleshooting jQuery input value

Question

I've been troubleshooting a form that allows for users to select an amount or select other amount. The other amount when click changes the amount to $5. I'm trying to get get it so that when the user changes the amount from 5 that it changes the amt = to user input.

The bit of script that changes it

function setDonrAmount(id){
    var amt = id.substring(10);
    if( amt == 'Other' ){ amt = 5}
    var others = id.substring(0,10);
    $("button[id*="+others+"]").removeClass('active');
    $('button#'+id).addClass('active');
    $('input#donrAmountInput').val(amt);
    $('input#donrAmountInput').change();
    $('#donrReviewAmount').html(amt);
}

For reference here's the actual form. Help would be greatly appreciated. https://secure.pva.org/site/c.ajIRK9NJLcJ2E/b.9381225/k.8668/FY2016_March_Congressional/apps/ka/sd/donorcustom.asp

Do you mean you want "$ Other" to become selected if the user types in a custom amount? — Ryan Dantzler
– Ryan Dantzler, Commented Mar 31, 2016 at 18:27
Yes, I'm trying to get the other button to be selected as well. — Dave Bergschneider
– Dave Bergschneider, Commented Mar 31, 2016 at 19:23

Ryan Dantzler · Accepted Answer · 2016-05-23 23:46:25Z

1

I've made a few updates to setDonrAmount() to handle custom donations.

$("#donrAmountButtons").on("click", function() {
  var amt = id.substring(10);
  setDonrAmount(amt);
  $('#donrAmount' + amt).addClass('active');
}); 

$("#donrAmountInput").on("focusout", function() {
  setDonrAmount($("#donrAmountInput").val());
  $('#otherAmount button').addClass('active');
}); 

function setDonrAmount(val) {
  var amt = val || 0;

  if (amt.length < 2 && amt < 5)
    amt = 5;

  $('input#donrAmountInput').val(amt);
  $('input#donrAmountInput').change();
  $('#donrReviewAmount').html(amt);

  $('#donrAmountButtons .active').removeClass('active');
}

edited May 23, 2016 at 23:46

answered Mar 31, 2016 at 19:28

Ryan Dantzler

1,1441 gold badge9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dave Bergschneider Over a year ago

That makes a lot of sense. I was racking my head on that for a couple hours but I needed to look at it form a different perspective.. coders block...lol

Dave Bergschneider Over a year ago

The odd thing is now I can't type a number that starts with less than 5. So if I try to type 20 or 15 it wont allow me to do that. I've tried a couple things but just can't get your script to work.

Ryan Dantzler Over a year ago

Added a conditional to check the length of input. If it is two digits or greater it will ignore the check for greater than 5

Dave Bergschneider Over a year ago

Hi Ryan, I tried that a few times and for some reason it still doesn't allow any other number than 5 for the initial number. I have your code implemented at the moment where you can see that. It has me baffled because logically the conditional makes sense.

Ryan Dantzler Over a year ago

Check the code changes. The issue is with the "input" event firing when the other amount buttons are being pressed. So I've separated the two events out into button "click" and "focusout" for custom inputs.

JoLoCo · Accepted Answer · 2016-03-31 18:29:44Z

1

You'll want to check for a keyup event on the input field, and make the selection when that happens. Something like... (inside document.ready)

$('#donrAmountInput').on('keyup', function() {
    // Probably best to strip any non-numeric characters from the field here
    amt = $(this).val();
    // pseudo-code: $('#donrAmountOther').select(); as I'm not sure about jQuery's handling of input group buttons. There'll be a way to select this one somehow!
});

answered Mar 31, 2016 at 18:29

JoLoCo

1,3752 gold badges13 silver badges24 bronze badges

Collectives™ on Stack Overflow

Troubleshooting jQuery input value

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related