Custom Credit Card number lengths

I'm working on a pizza website for school.

Here's the question I need to answer. *Allow users to choose from three types of credit card: Visa, MasterCard and American Express. Based on the type of credit card, limit the length of the credit card number, 16 digits for Visa and MasterCard, 15 digits for American Express. *

Currently, the page is setup so the user chooses whether he or she wants to pay when picking up the pizza or pay online using a credit card.

When online radiobox is checked, more radioboxes with credit card names appear.

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 for hiding the credit card radio box until delivery is checked

   $(document).ready(function() {

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

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

As you can see in the html codes, I tried to attempt this by creating multiple textboxes with maxlength. But I immediately realised this is inefficient and confusing.

I'm very new to these kind of stuff.

---

Create one input box for credit card number,initially disable the input box and on selection of the radio button for credit card enable the input box. HEre is change for both HTML and 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

---

If I were you, I wouldn't use all of those input:text . Instead, I'd use the data attribute to store all of the necessary data in it.

For example:

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

That way, you don't have to worry about hiding and showing several different boxes. Then, when the user clicks a new radio buttion, then you just have to set the maxlength attribute in the cardnumber input to the value of the 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);

});

I didn't throw logic in there to show/hide the card stuff based on cardpickup, etc. I think you can get that one ;)

链接地址: http://www.djcxy.com/p/70726.html

上一篇: 存储信用卡信息

下一篇: 自定义信用卡号码长度