Question

My "On Change" is Not Working

Version 11

Updated December 12, 2024

asked on December 10, 2024 • Show version history

I have two radio button fields. If either of these change, the docNoID field should change, but it doesn't:

Here's the code. I'm sure I'm doing something wrong. Please assist.

$(document).ready(function(){
//Update docNoID whenever calcIsFor or calcType changes
  $('.calcIsFor input, .calcType input').on('change', function(){
  var calcIsFor = $('.calcIsFor input:checked').val();
  var calcType = $('.calcType input:checked').val();
    if (calcType == 'AN') {
      if (calcIsFor == '2') {$('.docNoID input').val('6').change();}
      else if (calcIsFor == '3') {$('.docNoID input').val('11').change();}
      else if (calcIsFor == '4') {$('.docNoID input').val('16').change();}
      else if (calcIsFor == '5') {$('.docNoID input').val('21').change();}
      else if (calcIsFor == '6') {$('.docNoID input').val('26').change();}
    }
    else if (calcType == 'CU') {
      if (calcIsFor == '2') {$('.docNoID input').val('8').change();}
      else if (calcIsFor == '3') {$('.docNoID input').val('13').change();}
      else if (calcIsFor == '4') {$('.docNoID input').val('17').change();}
      else if (calcIsFor == '5') {$('.docNoID input').val('22').change();}
      else if (calcIsFor == '6') {$('.docNoID input').val('27').change();}
    }
    else if (calcType == 'FE') {
      if (calcIsFor == '2') {$('.docNoID input').val('7').change();}
      else if (calcIsFor == '3') {$('.docNoID input').val('12').change();}
      else if (calcIsFor == '4') {$('.docNoID input').val('17').change();}
      else if (calcIsFor == '5') {$('.docNoID input').val('22').change();}
      else if (calcIsFor == '6') {$('.docNoID input').val('27').change();}
    }
    else if (calcType == 'ST') {
      if (calcIsFor == '2') {$('.docNoID input').val('4').change();}
      else if (calcIsFor == '3') {$('.docNoID input').val('9').change();}
      else if (calcIsFor == '4') {$('.docNoID input').val('14').change();}
      else if (calcIsFor == '5') {$('.docNoID input').val('19').change();}
      else if (calcIsFor == '6') {$('.docNoID input').val('24').change();}
    }
    else if (calcType == 'TR') {
      if (calcIsFor == '2') {$('.docNoID input').val('5').change();}
      else if (calcIsFor == '3') {$('.docNoID input').val('10').change();}
      else if (calcIsFor == '4') {$('.docNoID input').val('15').change();}
      else if (calcIsFor == '5') {$('.docNoID input').val('20').change();}
      else if (calcIsFor == '6') {$('.docNoID input').val('25').change();}
    }
  });

})  //close document.ready

0 0

Answer

SELECTED ANSWER

replied on December 11, 2024

Hi, i'm just curious if this will work for you?

$(document).ready(function() {
// Update docNoID whenever calcType or calcIsFor changes
$('.calcIsFor input, .calcType input').on('change', function() {
var calcType = $('.calcType input:checked').val();
var calcIsFor = $('.calcIsFor input:checked').val();
var docNoIDValue;

if (calcIsFor == 'AN') {
docNoIDValue = { '2': '6', '3': '11', '4': '16', '5': '21', '6': '26' }[calcType];
} else if (calcIsFor == 'CU') {
docNoIDValue = { '2': '8', '3': '13', '4': '17', '5': '22', '6': '27' }[calcType];
} else if (calcIsFor == 'FE') {
docNoIDValue = { '2': '7', '3': '12', '4': '17', '5': '22', '6': '27' }[calcType];
} else if (calcIsFor == 'ST') {
docNoIDValue = { '2': '4', '3': '9', '4': '14', '5': '19', '6': '24' }[calcType];
} else if (calcIsFor == 'TR') {
docNoIDValue = { '2': '5', '3': '10', '4': '15', '5': '20', '6': '25' }[calcType];
}

if (docNoIDValue) {
$('.docNoID input').val(docNoIDValue).change();
}
});
}); // close document.ready

1 0

replied on December 12, 2024

Yes, that worked! I used it because it's nicely consolidated. Appreciate everyone's help!!!!

0 0

Replies

replied on December 10, 2024 • Show version history

Looks like there's an issue with your selectors. You don't have "input" specified in the first one, and you're missing the "." before the class name on the second one.

$('.calcIsFor, calcType input')

It should probably be

$('.calcIsFor input, .calcType input')

You'll also need to retrieve the values a different way because you're using radio buttons, which means you'll have multiple inputs that match the following selectors:

  var calcIsFor = $('.calcIsFor input').val();
  var calcType = $('.calcType input').val();

You could try this instead to get the checked/selected radio button's value.

  var calcIsFor = $('.calcIsFor input:checked').val();
  var calcType = $('.calcType input:checked').val();

0 0

replied on December 10, 2024

Thank you for those ideas! I've updated my code in my process (and in the original question above). No luck.

0 0

replied on December 11, 2024 • Show version history

UPDATE: I found another mistake I made. Here's the corrected javascript:

$(document).ready(function(){
//Update docNoID whenever calcType or calcIsFor changes
  $('.calcIsFor input, .calcType input').on('change', function(){
  var calcType = $('.calcType input:checked').val();
  var calcIsFor = $('.calcIsFor input:checked').val();
    if (calcIsFor == 'AN') {
      if (calcType == '2') {$('.docNoID input').val('6').change();}
      else if (calcType == '3') {$('.docNoID input').val('11').change();}
      else if (calcType == '4') {$('.docNoID input').val('16').change();}
      else if (calcType == '5') {$('.docNoID input').val('21').change();}
      else if (calcType == '6') {$('.docNoID input').val('26').change();}
    }
    else if (calcIsFor == 'CU') {
      if (calcType == '2') {$('.docNoID input').val('8').change();}
      else if (calcType == '3') {$('.docNoID input').val('13').change();}
      else if (calcType == '4') {$('.docNoID input').val('18').change();}
      else if (calcType == '5') {$('.docNoID input').val('23').change();}
      else if (calcType == '6') {$('.docNoID input').val('28').change();}
    }
    else if (calcIsFor == 'FE') {
      if (calcType == '2') {$('.docNoID input').val('7').change();}
      else if (calcType == '3') {$('.docNoID input').val('12').change();}
      else if (calcType == '4') {$('.docNoID input').val('17').change();}
      else if (calcType == '5') {$('.docNoID input').val('22').change();}
      else if (calcType == '6') {$('.docNoID input').val('27').change();}
    }
    else if (calcIsFor == 'ST') {
      if (calcType == '2') {$('.docNoID input').val('4').change();}
      else if (calcType == '3') {$('.docNoID input').val('9').change();}
      else if (calcType == '4') {$('.docNoID input').val('14').change();}
      else if (calcType == '5') {$('.docNoID input').val('19').change();}
      else if (calcType == '6') {$('.docNoID input').val('24').change();}
    }
    else if (calcIsFor == 'TR') {
      if (calcType == '2') {$('.docNoID input').val('5').change();}
      else if (calcType == '3') {$('.docNoID input').val('10').change();}
      else if (calcType == '4') {$('.docNoID input').val('15').change();}
      else if (calcType == '5') {$('.docNoID input').val('20').change();}
      else if (calcType == '6') {$('.docNoID input').val('25').change();}
    }
  });

})  //close document.ready

I transposed calcIsFor and .calcType. Once I fixedc it, it worked very nicely!

0 0

You are not allowed to follow up in this post.

Question

Question

My "On Change" is Not Working

Answer

Replies

Sign in to reply to this post.