Capture Credit/Debit Card Details In A Textbox In ASP.NET Using JavaScript

Ankit Bansal
9y
9.5k
0
3

Article

Description

We have to design a pair of 4 textboxes that capture the details of a credit/debit card, which is 16 digits always. The functionality that we want to provide is that when the 4^th value in each textbox is entered, the focus of the textbox automatically moves to the next one, so that no one can enter more than 4 digits in a textbox.

Solution

This is a very simple problem, and we can easily implement using raw JavaScript.

Step 1: Create an empty ASP.NET web application.

Step 2: Add a Webform to it. Also add Bootstrap references using NuGet package manager.

Step 3: Add the following code to it.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo.aspx.cs" Inherits="CreditCardDetailsCaptureTextBox.demo" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Credit Card Details Capture using JavaScript</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript">
function moveFocus(from, to) {
var length = from.value.length;
var maxLength = from.getAttribute("maxLength");
if (length == maxLength) {
document.getElementById(to).focus();
}
};
</script>
</head>
<body class="container-fluid">
<form id="form1" runat="server">
<div id="creditCardDetailsTextboxes" class="jumbotron">
Enter Card Number:
<asp:TextBox ID="TextBox1" runat="server" MaxLength="4" Width="50px" onkeyup="moveFocus(this,'TextBox2')"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server" MaxLength="4" Width="50px" onkeyup="moveFocus(this,'TextBox3')"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server" MaxLength="4" Width="50px" onkeyup="moveFocus(this,'TextBox4')"></asp:TextBox>
<asp:TextBox ID="TextBox4" runat="server" MaxLength="4" Width="50px"></asp:TextBox>
</div>
</form>
</body>
</html>

Step 4: The following is the explanation of the above mentioned code.

Actually in the above code, the main magic is of the Keyup event of the textbox. When the key of the keyboard on the 4^th time is up, then the JavaScript method will be called.