Tips n Tracks

JavaScript Auto filling data for ASP.NET web forms with data lock

When we go for shopping online, we purchase any item say CD, Books and place order. To ship our order company ask for our billing as well as shipping address. If we going to gift that item to anyone then both addresses will be different else will same. For same billing and shipping address shopping cart gives us an option. By clicking (checking/selecting) it our billing address content get fill in shipping address field which save our time to retype same address again.
All the process of auto filling data is done by JavaScript. Here we are going to design JavaScript Auto filling data for ASP.NET web forms. Also we are going to lock those fields as we simply coping data from one data field to other.
Working and coding of any JavaScript which get applied on web forms is based on design of form. So first of all we design a web form in ASP.NET. You can design form depending upon data you want from user. Create new ASP.NET web site and design your form. Here I have used dummy form for representation which looks as follows.

Following piece of code will made above form for you.

<form id="frmMain" runat="server">
<table>
<tr>
<td><strong style="font-family:Tahoma;">Billing Information</strong></td>
</tr>
<tr>
<td>
<table>
<tr>
<td>First Name:</td>
<td>
<asp:TextBox CssClass="inputbox" ID="BillTo_Name_First" runat="server" ></asp:TextBox>
</td>
</tr>
<tr>
<td>Last Name:</td>
<td>
<asp:TextBox CssClass="inputbox" ID="BillTo_Name_Last" runat="server" ></asp:TextBox>
</td>
</tr>
<tr>
<td>Address:</td>
<td>
<asp:TextBox CssClass="inputbox" ID="BillTo_Address" runat="server" ></asp:TextBox>
</td>
</tr>
<tr>
<td>City:</td>
<td>
<asp:TextBox CssClass="inputbox" ID="BillTo_City" runat="server" ></asp:TextBox>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div style="text-align:center;">
</div>
<table>
<tr>
<td><strong style="font-family:Tahoma;">Shipping Information</strong></td>
</tr>
<tr>
<td id="rbtnCopy">
<input id="Radio1" type="radio" onclick="useBillInfo();" />Copy</p>
<input id="rbtnUndo" type="radio" onclick="UNuseBillInfo();" />Undo</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>First Name:</td>
<td> <asp:TextBox CssClass="inputbox" ID="ShipTo_Name_First" runat="server" ></asp:TextBox>
</td>
</tr>
<tr>
<td>Last Name:</td>
<td> <asp:TextBox CssClass="inputbox" ID="ShipTo_Name_Last" runat="server" ></asp:TextBox>
</td>
</tr>
<tr>
<td>Address:</td>
<td> <asp:TextBox CssClass="inputbox" ID="ShipTo_Address" runat="server" ></asp:TextBox>
</td>
</tr>
<tr>
<td>City:</td>
<td> <asp:TextBox CssClass="inputbox" ID="ShipTo_City" runat="server" ></asp:TextBox>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>

Now we have to design JavaScript for perform the operation of auto filling data. Add a Jscript file to your project. Also include that file to your .aspx page. Put below code in HEAD section of your page.

<script type="text/javascript" src="JScript.js"></script>

Now we are going to design JavaScript code. In our example I have used two JavaScript functions. First useBillInfo() for copy data and secondUNuseBillInfo() for undo it. Take a look on code below to get detail idea, put the code in your Jscript file.

function useBillInfo(){
var idx;
{
frmMain.ShipTo_Name_First.value= frmMain.BillTo_Name_First.value;
frmMain.ShipTo_Name_Last.value = frmMain.BillTo_Name_Last.value;
frmMain.ShipTo_Address.value = frmMain.BillTo_Address.value;
frmMain.ShipTo_City.value = frmMain.BillTo_City.value;
frmMain["ShipTo_Name_First"].disabled=true;
frmMain["ShipTo_Name_Last"].disabled=true;
frmMain["ShipTo_Address"].disabled=true;
frmMain["ShipTo_City"].disabled=true;
    }
}
    function UNuseBillInfo(){
var idx;
{
frmMain.ShipTo_Name_First.value= "";
frmMain.ShipTo_Name_Last.value = "";
frmMain.ShipTo_Address.value = "";
frmMain.ShipTo_City.value = "";
frmMain["ShipTo_Name_First"].disabled=false;
frmMain["ShipTo_Name_Last"].disabled=false;
frmMain["ShipTo_Address"].disabled=false;
frmMain["ShipTo_City"].disabled=false;
}
}

Here we just copy data from one field to other field. Change the above code as per your forms design.

Download

Download source code for ‘JavaScript Auto filling data for ASP.NET web forms with data lock’

Download