Длина абонентской кредитной карты

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

Вот вопрос, на который я должен ответить. * Разрешить пользователям выбирать из трех типов кредитной карты: 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-кодах, я попытался сделать это, создав несколько текстовых полей с <div> Номер кредитной карты <input id = "creditCardNumber" type = "text" name = "cardnum" disabled /> </ div> . Но я сразу понял, что это неэффективно и запутанно.

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

javascript,html,css,numbers,

0

Ответов: 2

1

Создайте одно поле ввода для номера кредитной карты, сначала отключите поле ввода, а при выборе переключателя для кредитной карты включите окно ввода. HERE - это изменение как для HTML, так и для JS

HTML

   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
       })
     }
   }

JS

input:text

DEMO

0

Если бы я был вами, я бы не использовал все это data. Вместо этого я бы использовал атрибут для хранения всех необходимых данных.<input type="radio" name="cardtype" value="visa" data-maxLength="16"/>Visa

Например:

maxlength

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

JavaScript, HTML, CSS, номер,
Похожие вопросы
Яндекс.Метрика