<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Card Payment</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script type="text/javascript">
   function onCardSelection(option) {
         // this function is called on change of asp:dropdownlist value
         if (option.options[option.selectedIndex].text === "Amex") {
            document.getElementById("Card4").style.display = "none";
         } else {
            document.getElementById("Card4").style.display = "inline-block";
         }
         document.getElementById("Card1").value = "";
         document.getElementById("Card2").value = "";
         document.getElementById("Card3").value = "";
         document.getElementById("Card4").value = "";
   }

   function isNumberKey(evt)
   {
         // this function does not allow user to enter characters other than numbers
         var charCode = (evt.which) ? evt.which : evt.keyCode;
         if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
         }
         return true;
   }

   function textBoxChangeCard1(textBox) {
         // when value changed in card number 1 text box, the length is checked
         if (textBox.value.length >= 4) {
            // when the length of the text in card 1 text box reaches or exceeds 4, change focus to card 2 text box
            document.getElementById("Card2").focus();
         }
   }

   function textBoxChangeCard2(textBox) {
         // when value changed in card number 1 text box, the length is checked
         var dropDown = document.getElementById("CardTypeDropDown");
         var cardType = dropDown.options[dropDown.selectedIndex].text;
         if (cardType === "Amex") {
            if (textBox.value.length>=6) {
               document.getElementById("Card3").focus();
            }
         } else {
            if (textBox.value.length>=4) {
               document.getElementById("Card3").focus();
            }
         }
   }

   function textBoxChangeCard3(textBox) {
         // when value changed in card number 1 text box, the length is checked
         var dropDown = document.getElementById("CardTypeDropDown");
         var cardType = dropDown.options[dropDown.selectedIndex].text;
         if (cardType === "Amex") {
            if (textBox.value.length>=5) {
               document.getElementById("CVVTxt").focus();
            }
         } else {
            if (textBox.value.length>=4) {
               document.getElementById("Card4").focus();
            }
         }
   }

   function textBoxChangeCard4(textBox) {
         // when value changed in card number 4 text box, the length is checked focus passed to cvv textBox
         if (textBox.value.length>=4) {
            document.getElementById("CVVTxt").focus();
         }
   }

   function cvvValidation(textBox) {
         // checks length on input change in the cvv text box
         var dropDown = document.getElementById("CardTypeDropDown");
         var cardType = dropDown.options[dropDown.selectedIndex].text;
         if (cardType === "Amex") {
            if (textBox.value.length > 4) {
               document.getElementById("CVVError").innerText = "Invalid CVV Number";
            } else {
               document.getElementById("CVVError").innerText = "";
            }
         } else {
            if (textBox.value.length > 3) {
               document.getElementById("CVVError").innerText = "Invalid CVV Number";
            } else {
               document.getElementById("CVVError").innerText = "";
            }
         }
   }

   function onClickSubmit() {
         // validate the whole form on click submit button
         var validated = true;
         var dropDown = document.getElementById("CardTypeDropDown");
         var cardType = dropDown.options[dropDown.selectedIndex].text;
         var card1 = document.getElementById("Card1").value.length;
         var card2 = document.getElementById("Card2").value.length;
         var card3 = document.getElementById("Card3").value.length;
         var card4 = document.getElementById("Card4").value.length;
         var cvv = document.getElementById("CVVTxt").value.length;

         if (cardType === "Amex") {
            // if card type is amex check the conditions
            if (card1 != 4 || card2 != 6 || card3 != 5 || cvv != 4) {
               validated = false;
            }
         } else {
            if (card1 != 4 || card2 != 4 || card3 != 4 || card4 != 4 || cvv != 3) {
               validated = false;
            }
         }

         if (validated) {
            // if validated display label in green
            document.getElementById("MsgTxt").innerText = "Payment processed successfully.";
            document.getElementById("MsgTxt").style.color = "Green";
         } else {
            document.getElementById("MsgTxt").innerText = "Error processing payment, please check card details.";
            document.getElementById("MsgTxt").style.color = "Red";
         }
   }

(Computer-Assisted Instruction) The use of computers in education i...