自定义信用卡号码长度
我正在为一所学校的比萨网站工作。
这是我需要回答的问题。 *允许用户从三种类型的信用卡中选择：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>
JS代码隐藏信用卡无线电框直到交付被检查
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'paypickup') {
$('#hidden2').hide();
}
if($(this).attr('id') == 'online') {
$('#hidden2').show();
}
});
});
正如你可以在html代码中看到的那样，我试图通过用maxlength创建多个文本框来进行尝试。 但我立即意识到这是低效和混乱的。
我对这些东西很陌生。
为信用卡号创建一个输入框，最初禁用输入框，并选择用于信用卡的单选按钮启用输入框。 对于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
如果我是你，我不会使用所有这些input:text 。 相反，我会使用data属性来存储所有必要的数据。
例如：
<input type="radio" name="cardtype" value="visa" data-maxLength="16"/>Visa
这样，你不必担心隐藏和显示几个不同的框。 然后，当用户点击一个新的radio buttion时，你只需cardnumber输入中的maxlength属性设置为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);
});
我没有把逻辑放在那里来显示/隐藏基于cardpickup等的卡片的东西，我认为你可以得到那一个;）
链接地址: http://www.djcxy.com/p/70725.html