맞춤 신용 카드 번호 길이

Question

학교용 피자 웹 사이트에서 일하고 있습니다.

여기 제가 대답해야 할 질문이 있습니다. * 사용자가 Visa, MasterCard 및 American Express의 세 가지 유형의 신용 카드 중에서 선택할 수 있습니다. 신용 카드의 종류에 따라 신용 카드 번호의 길이를 제한하십시오. Visa 및 MasterCard의 경우 16 자리, American Express의 경우 15 자리. *

현재 페이지는 사용자가 피자를 집을 때 지불 할 것인지 또는 신용 카드를 사용하여 온라인으로 지불 할 것인지 선택합니다.

온라인 라디오 박스를 선택하면 신용 카드 이름이있는 더 많은 라디오 박스가 나타납니다.

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> 

는 HTML 코드에서 볼 수 있듯이 배달

$(document).ready(function() { 

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

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

을 확인 될 때까지 신용 카드 라디오 상자를 숨기는

JS 코드는, 내가 배를 만들어이 시도하려 maxlength가있는 텍스트 상자. 그러나 나는 이것이 비효율적이고 혼란 스럽다는 것을 즉시 깨달았다.

저는 이런 종류의 물건에 대해 매우 새로운 사람입니다.

Answer 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 속성을 설정해야

나는 cardpickup 등을 기반으로 카드 물건을 보이거나 숨길 수있는 로직을 던지지 않았지만 그 카드를 얻을 수 있다고 생각합니다.)