Пользовательские номера кредитных карт

Question

Я работаю на сайте пиццы для школы.

Вот вопрос, на который я должен ответить. * Позвольте пользователям выбрать один из трех типов кредитной карты: Visa, MasterCard и American Express. По типу кредитной карты ограничьте длину номера кредитной карты, 16 цифр для Visa и MasterCard, 15 цифр для American Express. *

В настоящее время страница настроена так, что пользователь выбирает, хочет ли он или она заплатить при получении пиццы или оплате в Интернете с помощью кредитной карты.

Когда онлайн-радиооборудование проверено, появятся больше радиобоксов с названиями кредитных карт.

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. Но я сразу понял, что это неэффективно и запутанно.

Я очень новичок в таких вещах.

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 

Таким образом, вам не придется беспокоиться о сокрытии и показывает несколько различных коробок. Затем, когда пользователь нажимает на новое радио Buttion, то вам просто нужно установить атрибут maxlength в cardnumber ввода в значении 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, и т. Д. Я думаю, вы можете получить этот;)