Cloning TextBox Value Into Another Using jQuery

Introduction: In this article we will discuss how to use jQuery with a master page and we are also going to explore how to clone one textbox value inside another textbox using jQuery. Cloning means whatever we enter inside the textbox then we will see that it will automatically insert inside another textbox. In this article we have to use a master page in which we will use a jQuery reference inside it and we will create a default page which will contains the jQuery code and pass the reference of that script inside the container. In this we are using CSS for applying some awesome effects, let's see how we will use jQuery with master page and cloning the textbox value.

Step 1: Firstly you have to create a web site

Go to visual studio 2010
New-> Select a website application
Click OK

Step 2: Secondly you have to add a JScript file to the Scripts folder

Go to the Solution Explorer
Right Click on the Scripts folder
Select add new item
Add new JScript file and give it a name
Click OK

Step 3: In this step let's see the JScipt code for the cloning the textbox value first of all you will have to open the .js file let see how it will looklike:

Step 4: Now in this step you have to write the code for the .js file

Explanation: In this explanation first of all we have to use the event named as keyup which will be fired As the user types in the first TextBox, we retrieve the value of the first TextBox and set it to the value of the second TextBox. Here is the working of the jQuery code that how to clone one textbox value inside the other textbox value.

Step 5: In this step we will see that from where we have to placed the jQuery reference inside the master page file let see from where you have to give it.

Step 6: In this step we will copy the script file path on right click and place it into the master page file let see the code given below how it will added:

MasterPage code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</form>
</body>
</html>

Step 7: In this step we have to add the reference of the clone.js file let see from where you have to add the reference which is given below:

Step 8: In this step we will see that where we will placed the reference of the clone.js file inside the Default2.aspx page which is given below:

Code:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/clone.js"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div style="font-family: 'Comic Sans MS'; font-size: large; background-color: #2a2a2a;">
<h1 style="font-family: 'Comic Sans MS'; font-size: x-large; color: #FFFF00; background-color: #800000;">Enter the text in the first textbox then we will see that the text inside the first textbox will be cloned inside the second textbox
</h1>
<br />
<asp:TextBox ID="txt1" runat="server" Height="43px" Width="134px"
BackColor="Maroon" BorderColor="#FFFF66" BorderStyle="Double" BorderWidth="5px"
Font-Size="Large" ForeColor="#CCFF66" />
<br />
<br />
<br />
<asp:TextBox ID="txt2" runat="server" Height="43px" Width="134px" BackColor="Maroon" BorderColor="#FFFF66" BorderStyle="Double" BorderWidth="5px"
Font-Size="Large" ForeColor="#CCFF66" />
<br /><br /><br />
</div>
</asp:Content>

Step 9: in this step we will see the design of the Default.aspx page let see the figure given beolw:

Step 10: In this step we are going to run the application by pressing F5 then the output of the page is given below:

Output1:

Output2: