クライアント用のクレジット カード フォームを作成していて、その人がクレジット カード番号を入力し始めたら、クレジット カード会社のロゴを表示したいと考えています。
すべての Visa は 4 から始まります。MC は 5 です。Discover は 6 です。Amex は 36、Diners は 37 です。
だから私はこのようなことを試みています:
<script>
$(document).ready(function() {
$($('#cardNumber').val().substring(0,1)).change(function() {
switch ($(this).val()) {
case '4':
$('#cardImage').hide().html('<img src="img/visa.png" alt="Visa" style="width: 50px; height: 30px;">').fadeIn(250);
break;
case '5':
$('#cardImage').hide().html('<img src="img/mastercard.png" alt="Mastercard" style="width: 50px; height: 30px;">').fadeIn(250);
break;
case '6':
$('#cardImage').hide().html('<img src="img/discover.png" alt="Discover" style="width: 50px; height: 30px;">').fadeIn(250);
break;
}
});
});
</script>
<form name="creditCardForm" id="creditCardForm" action="" method="post">
<fieldset>
<label for="cardNumber">Card Number:</label>
<span id="cardImage"></span>
<input type="text" name="cardNumber" id="cardNumber">
</fieldset>
</form>
...一方、値の最初の文字だけに変更関数を適用しようとしています。このようなことは可能ですか?
- アップデート -
以下のコメントに基づいて、入力された最初の数字だけを含む非表示フィールドを持つようにフォームを変更しました。私が今直面している問題は、キーアップが非表示フィールドの変更をトリガーしていないことです。隠しフィールドの最後に .change() 関数をチェーンすると、毎回画像が表示されます。ユーザーが戻って最初の数字を再度変更した場合に備えて、最初の数字が入力された後にイベントをバインド解除したくありません。
ここで進む方法について何か考えはありますか?
<script>
$(document).ready(function() {
$('#cardNumber').on('keyup', function() {
$('#firstCreditCardDigit').val($(this).val().substring(0,1));
});
$('#firstCreditCardDigit').change(function() {
switch ($(this).val()) {
case '4':
$('#cardImage').hide().html('<img src="img/visa.png" alt="Visa" style="width: 50px; height: 30px;">').fadeIn(250);
break;
case '5':
$('#cardImage').hide().html('<img src="img/mastercard.png" alt="Mastercard" style="width: 50px; height: 30px;">').fadeIn(250);
break;
case '6':
$('#cardImage').hide().html('<img src="img/discover.png" alt="Discover" style="width: 50px; height: 30px;">').fadeIn(250);
break;
}
});
});
</script>
<form name="creditCardForm" id="creditCardForm" action="" method="post">
<input type="hidden" name="firstCreditCardDigit" id="firstCreditCardDigit">
<fieldset>
<label for="cardNumber">Card Number:</label>
<span id="cardImage"></span>
<input type="text" name="cardNumber" id="cardNumber">
</fieldset>
</form>