I encountered a peculiar issue recently. I have a form with a field for entering card numbers. There is a JavaScript code that automatically detects the type of card (such as Maestro, Visa, etc.) based on the entered number. If the detected card type is 'Maestro', it populates this value in a hidden field within the form.
My goal now is to implement another JavaScript function that reads the value in the hidden field (id="ccType") and hides a text field with id="cvv".
$('#ccType').change(function(){
if($(this).val() == 'maestro')
$('#cvv').closest('.name').hide();
else
$('#cvv').closest('.name').show();
});
The above JavaScript snippet works fine when the hidden field (id='ccType') has been manually updated with a value, resulting in the hiding of the cvv field upon losing focus. However, the challenge arises when the ccType field is auto-filled by another script that dynamically detects the card type, causing the aforementioned code not to function properly.
I am struggling to find an alternate solution to hide the cvv field when the ccType field is auto-populated by the detecting/filling script.
You can view my demonstration in this Fiddle http://jsfiddle.net/y8UKN/5/, where I have included both scripts – one for auto-filling and the other for hiding the cvv field (which currently doesn't work).
To simplify testing, I have removed the 'hidden' attribute from the ccType field so you can observe the auto-filled value. Try entering a card number starting with "6" to trigger the detection of 'Maestro' and see how this value should hide the cvv field.
I understand this may be a complex issue, but I have provided detailed information along with a functional demo. Looking forward to a prompt resolution.
Thank you!