Benutzerdefinierte Kreditkartennummer Längen

Question

Ich arbeite an einer Pizza-Website für die Schule.

Hier ist die Frage, die ich beantworten muss. * Die Benutzer können zwischen drei Arten von Kreditkarten wählen: Visa, MasterCard und American Express. Beschränken Sie je nach Kreditkartenart die Länge der Kreditkartennummer, 16 Ziffern für Visa und MasterCard, 15 Ziffern für American Express. *

Derzeit ist die Seite eingerichtet, so dass der Benutzer wählt, ob er oder sie bezahlen will, wenn er die Pizza abholt oder online mit einer Kreditkarte bezahlt.

Wenn Online-Radiobox aktiviert ist, werden weitere Radioboxen mit Kreditkartennamen angezeigt.

HTML-Codes

<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-Code der Kreditkarte Radiobox für das Verstecken bis zur Lieferung

$(document).ready(function() { 

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

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

geprüft Wie Sie in den HTML-Codes sehen können, ich das mehrere durch die Schaffung von versuchen, versucht Textfelder mit maximaler Länge. Aber ich merkte sofort, dass das ineffizient und verwirrend ist.

Ich bin sehr neu in diese Art von Sachen.

Answer 1

Erstellen Sie ein Eingabefeld für die Kreditkartennummer, deaktivieren Sie zunächst das Eingabefeld und aktivieren Sie bei Auswahl des Optionsfelds für die Kreditkarte das Eingabefeld. Hier ist die Veränderung für HTML und 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

Wenn ich Sie wäre, würde ich nicht alle diejenigen verwenden input:text. Stattdessen würde ich das Attribut data verwenden, um alle erforderlichen Daten darin zu speichern.

Zum Beispiel:

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

Auf diese Weise müssen Sie sich keine Sorgen über versteckt und verschiedene Boxen zeigen. Dann, wenn der Benutzer ein neues Radio buttion klickt, dann müssen Sie nur noch setzen das maxlength Attribut im cardnumber Eingang auf den Wert der data-attr

DEMO: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); 

}); 

Ich habe keine Logik dort hinein geworfen, um das Kartenmaterial basierend auf Cardpickup usw. anzuzeigen/zu verstecken. Ich denke, du kannst das bekommen;)