カスタムクレジットカード番号の長さ

Question

私は学校のためのピザのウェブサイトで働いています。

ここに私が答える必要がある質問があります。 * Visa、MasterCard、American Expressの3種類のクレジットカードから選択できます。クレジットカードの種類に基づいて、クレジットカード番号の長さを制限します.16桁のVisaとMasterCard、15桁のAmerican Express。 *

現在、ページは設定されているため、ピザをピックアップするときに支払うか、クレジットカードでオンラインで支払うかをユーザーが選択します。

オンラインラジオボックスがオンになっていると、クレジットカード名のラジオボックスが表示されます。あなたは、HTMLコードに見ることができるように配信されるまでクレジットカードのラジオボックスを隠すため

HTMLコード

<p> Payment Method</p> 
<input id="paypickup" type="radio" name="rbRating" 
value="Pick Up" checked />Pay on pickup 
<input id="online" type="radio" name="rbRating" 
value="online" />Online 


<div id="hidden2" class="textinput"> 
<input id="visa" type="radio" name="cardtype" 
value="Visa" onclick="showMe('visanum')"/>Visa 
<input id="mastercard" type="radio" name="cardtype" 
value="MasterCard" onclick="showMe('masternum')"/>MasterCard 
<input id="americanexpress" type="radio" name="cardtype" 
value="American Express" onclick="showMe('americaninfo')"/>American Express 
</div> 

<div id="visainfo"> 
<label for="visanum">Credit Card Number</label> 
<input id="visanum" type="text" name="cardnum" maxlength="16" /> 
</div> 
<div id="masterinfo"> 
<label for="masternum">Credit Card Number</label> 
<input id="masternum" type="text" name="cardnum" maxlength="16" /> 
</div> 
<div id="americaninfo"> 
<label for="americannum">Credit Card Number</label> 
<input id="americannum" type="text" name="cardnum" maxlength="15" /> 
</div> 
<button type="submit" value="Submit">Submit</button> 
<button type="reset" value="Reset">Reset</button> 

JSコードが

$(document).ready(function() { 

    $('input[type="radio"]').click(function() { 
    if($(this).attr('id') == 'paypickup') { 
     $('#hidden2').hide();   
    } 

    if($(this).attr('id') == 'online') { 
     $('#hidden2').show(); 
    } 
    }); 
}); 

をチェックされて、私は複数を作成することによって、これを試みてみましたmaxlengthのテキストボックス。しかし、私はすぐにこれが非効率で混乱していることを認識しました。

私はこれらの種類のものに非常に新しいです。

Answer 1

クレジットカード番号の入力ボックスを1つ作成し、最初は入力ボックスを無効にし、クレジットカードのラジオボタンを選択すると入力ボックスを有効にします。ここではHTMLとJS

HTML

<div> 
    Credit Card Number 
    <input id="creditCardNumber" type="text" name="cardnum" disabled/> 
</div> 

JS

function showMe(type) { 
    // clear previous value 
    $("#creditCardNumber").val(''); 
    // enable the input and accept 16 digits for amex 
    if (type == "americaninfo") { 
     $("#creditCardNumber").attr({ 
     maxlength: 16, 
     disabled: false 
     }); 
    } else { 
     $("#creditCardNumber").attr({ 
     maxlength: 15, 
     disabled: false 
     }) 
    } 
    } 

DEMO

Answer 2

の両方の変更は、私があなただったら、私はそれらのすべてを使用しないことですinput:text。代わりに、data属性を使用して、必要なすべてのデータを格納します。例えば

：

<input type="radio" name="cardtype" value="visa" data-maxLength="16"/>Visa 

そのように、あなたはいくつかの異なる箱を隠し、表示を心配する必要はありません。https://jsbin.com/nufamixisi/edit?html,js,output

// Hide input 
$(".cardInput").hide(); 


// User clicks on radio button so we need to show the input for card info 
$('input:radio[name=cardtype]').click(function() { 

    // Show the input for card and delete old value 
    $("input:text[name=cardnum]").val(""); 
    $(".cardInput").show(); 

    // Get the maxLength set in the selected radio button 
    var ml = $(this).attr("data-maxLength"); 

    $("input:text[name=cardnum]").attr("maxlength", ml); 

}); 

：ユーザーが新しい無線buttionをクリックしたときに続いて、あなただけの data-attr

DEMOの値にcardnumber入力してmaxlength属性を設定する必要があります

カードピックアップなどに基づいてカードの内容を表示/非表示するロジックはありませんでした。あなたはそのカードを手に入れることができると思います。）