Scribd
Upload
7 views8 pages

Add Values From Textboxes To GridView Using Jquery

This document provides a tutorial on how to add values from textboxes to a GridView control using jQuery in an ASP.NET application. It outlines the necessary HTML markup, jQuery script, and explains how to extract textbox values, add them to the GridView, and clear the input fields. The article is aimed at beginners looking to understand basic data exchange techniques between textboxes and a GridView.

Uploaded by

nimit070286
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views8 pages

Add Values From Textboxes To GridView Using Jquery

This document provides a tutorial on how to add values from textboxes to a GridView control using jQuery in an ASP.NET application. It outlines the necessary HTML markup, jQuery script, and explains how to extract textbox values, add them to the GridView, and clear the input fields. The article is aimed at beginners looking to understand basic data exchange techniques between textboxes and a GridView.

Uploaded by

nimit070286
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

11/6/2017 Add Values from Textboxes to GridView using jQuery

Home Asp.Net Jquery AngularJS Excel (Vba) Javascript Gridview

Html5 Ajax Demos


Menu

home
asp.net
jquery
excel (vba)
angularjs
javascript
html5
ajax
gridview
demos

Add Values from Textboxes to GridView using jQuery


gridview jquery asp.net

Custom Search Search

Want to keep up to date with all my lastest articles and tip?


Click Here to Subscribe

http://www.encodedna.com/gridview/tutorial/add-values-from-textbox-to-gridview-using-jquery.htm 1/8
11/6/2017 Add Values from Textboxes to GridView using jQuery

Recent Posts

Dynamically Bind or Populate


SELECT Dropdown List with
JSON Data using jQuery Ajax

Populate a SELECT Dropdown


Like 189 Share

Posts You Can't Miss

Convert JSON Data Dynamically to HTML Table using JavaScript

AngularJS File Upload using $http post and FormData

Excel VBA – Read Data from a Closed Excel File or Workbook without Opening it

Dynamically Add / Remove HTML Elements using jQuery append(), after() and remove() methods

Push New Elements Inside an ngRepeat Array from AngularJS $scope

Send Email from an Excel File using VBA Macro and Outlook

Restrict or Disable Browser Back Button Using JavaScript

AngularJS Multiple File Upload example using Web API

Export data to Excel in Asp.Net – All Excel versions

Inject AngularJS date Filter in Controller using JavaScript

We know how to extract data from a data source and bind it with a GridView control using SqlDataSource. In-fact there
is numerous other ways to extract and bind data in Asp.Net using code-behind procedures. However, in this article we
will see how to add values from textboxes to a GridView control using jQuery.

This article is for beginners, who wish to learn some basic technique on data exchange between few textboxes and the
mighty GridView control.

The technique is very simple yet useful. Simply imagine you have few textbox controls and you would like to get the

http://www.encodedna.com/gridview/tutorial/add-values-from-textbox-to-gridview-using-jquery.htm 2/8
11/6/2017 Add Values from Textboxes to GridView using jQuery

values from these textboxes and fill in the columns and simultaneously add new rows with data to the GridView.

The above image explains it all. Let us now see how our example works. I'll first add a GridView control with three
textboxes on my web page.

The Markup
<!DOCTYPE html>
<html>
<head>
<title>Textbox to GridView using jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style>
div {
font:11px Verdana;
width:500px;
}
.grid {
width:100%;
font:inherit;
background-color:#FFF;
border:solid 1px #525252;
}
.grid td {
font:inherit;
padding:2px;
border:solid 1px #C1C1C1;
color:#333;
text-align:center;
text-transform:uppercase;
}
.grid th {
padding:3px;
color:#FFF;
background:#424242 url(grd.png) repeat-x top;
border-left:solid 1px #525252;

http://www.encodedna.com/gridview/tutorial/add-values-from-textbox-to-gridview-using-jquery.htm 3/8
11/6/2017 Add Values from Textboxes to GridView using jQuery
font:inherit;
text-align:center;
text-transform:uppercase;
}
ul {
padding:0;
margin:2px 5px;
list-style:none;
border:0;
float:left;
width:70%;
}
li {
width:50%;
float:left;
display:inline-block;
}
</style>
</head>
<body>
<form runat="server">
<div>
<%--MY GRIDVIEW CONTROL--%>
<asp:GridView ID="grdBooks"
runat="server"
AutoGenerateColumns="False"
DataKeyNames="EmpID"
DataSourceID="SqlDataSource1"
CssClass="grid"
GridLines="None">

<Columns>
<asp:BoundField DataField="EmpID" HeaderText="EmpID"
ReadOnly="True" SortExpression="EmpID" />
<asp:BoundField DataField="EmpName" HeaderText="EmpName"
SortExpression="EmpName" />
<asp:BoundField DataField="Designation" HeaderText="Designation"
SortExpression="Designation" />
<asp:BoundField DataField="Department" HeaderText="Department"
SortExpression="Department" />
</Columns>
</asp:GridView>

<%--POPULATE DATA TO THE GRIDVIEW USING SqlDataSource--%>


<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ENCODEDNAConnectionString %>"
SelectCommand="SELECT [EmpID], [EmpName], [Designation], [Department] FROM [Employee]">
</asp:SqlDataSource>
<br />

<%--FEW TEXTBOXES WITH A BUTTON--%>


<div id="divContainer">
<ul>
<li><label>Employee Name: </label></li>
<li><input type="text" id="tbEmp" /></li>
</ul>
<ul>
<li><label>Designation: </label></li>
<li><input type="text" id="tbDesig" /></li>
</ul>
<ul>
<li><label>Department: </label></li>
<li><input type="text" id="tbDep" /></li>
</ul>
<ul>
<li></li>
<li>
<input type="button" id="btAdd" value="Add to Grid" />
</li>
</ul>
http://www.encodedna.com/gridview/tutorial/add-values-from-textbox-to-gridview-using-jquery.htm 4/8
11/6/2017 Add Values from Textboxes to GridView using jQuery
</div>
</div>
</form>
</body>

Inside the <body> section, I have added a GridView control, followed by three labels and textboxes. Using
SqlDataSource, I have populated the Grid with few rows of data. This is easiest way to initialize a GridView control and
add few columns and rows to it.

Related: How to Bind Data to a GridView using SqlDataSource in Asp.Net

The Script
<script>
$('#btAdd').click(function () {
var rowCount;
rowCount = $('#grdEmployee tr').length; // GET ROW COUNT.

// ADD TEXTBOX VALUES TO THE GRIDVIEW.


if ($('#tbEmp').val() != '' && $('#grdEmployee tr').length > 1) {
$('#grdEmployee tr:last').after('<tr><td>' + rowCount + '</td>' +
'<td>' + $('#tbEmp').val() + '</td>' +
'<td>' + $('#tbDesig').val() + '</td>' +
'<td>' + $('#tbDep').val() + '</td>' + '</tr>');

// CLEAR ALL TEXTBOXES.


$('#divContainer').find('input:text').each(function () {
$('input:text[id=' + $(this).attr('id') + ']').val('');
}
);
}
else alert('Invalid!');
});
</script>
</html>

Rs.249 Rs.399 Rs.995 Rs.1,289 Rs.689 Rs.298 Rs.199

The above script is executed on button click event. The script has three important sections.

In the first part, I'll get the total row count of the GridView. It provides me the last unique ID of the employee, listed in
the Grid. Later, when necessary, I can save the data in a database table using the unique ID. To get the row count I have
http://www.encodedna.com/gridview/tutorial/add-values-from-textbox-to-gridview-using-jquery.htm 5/8
11/6/2017 Add Values from Textboxes to GridView using jQuery

used jQuery .length() method

Related: Count Asp.Net GridView Rows using jQuery length Property

Second, I'll extract the values from each textbox and add the values to the GridView. In addition, it creates a new row and
adds it to the Grid. Remember, every time you click the button, it will add a new row.

See, how I have used the <table> element features in my jQuery script. This is because, the GridView produces a
<table> like structure when rendered on the browser. Check this article to understand this better.

Finally, I'll clear all the textboxes at once using a jQuery procedure.

$('#divContainer').find('input:text').each(function () {
$('input:text[id=' + $(this).attr('id') + ']').val('');
}
);

All the textboxes are inside a <div> element (a container). Using jQuery .find() and .each() method, I can quickly clear
the input boxes, once values are added to the Grid.

Conclusion

Simple and yet useful, this article just showed you how to extract values from textboxes and add it to a GridView control.
We also saw how to get the total rows count of a GridView control and how we can clear all the input fields with the
click of a single button.

Thanks for reading.

Previous - Count Asp.Net GridView Rows using jQuery Next - Filter or Search Records in a GridView Based on a
length Property Date Range using Asp.Net FilterExpression Property

Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id Sign Up! Delivered by FeedBurner

Share this article

Related Posts:

http://www.encodedna.com/gridview/tutorial/add-values-from-textbox-to-gridview-using-jquery.htm 6/8
11/6/2017 Add Values from Textboxes to GridView using jQuery

Insert New Records in How to Copy data from Search Records or Filter Dynamically Add
Database Table Using Multiple Sheets to a rows in a GridView Textbox and Button
GridView - C# and... Single Sheet in Excel... Control using Asp.Net using jQuery and Save...

Add Rows to a Table How to Open a New AutoComplete Textbox Show the Sum of
Dynamically using Window from GridView using jQuery and GridView Column Values
jQuery in Asp.Net Using... Asp.Net Web Service -... in Footer in Asp.Net –...

Join our Google Plus Community and be a part of a discussion!

About Me
I am Arun Banik . I live in Mumbai (formerly Bombay), the financial capital of India.

EncodeDna.com is an effort to present good, useful articles and codes for programmers, web developers, database designers and beginners.
The articles and codes are kept simple and to the point.

Read more about me ...

Connect With Me
Facebook Google+
Twitter RSS

Home / Contact / Advertise / Privacy Policy

Categories
Ajax AngularJS
Asp.Net AutoComplete
Bootstrap Browser
Charts Crystal Report

http://www.encodedna.com/gridview/tutorial/add-values-from-textbox-to-gridview-using-jquery.htm 7/8
11/6/2017 Add Values from Textboxes to GridView using jQuery

CSS DatePicker
Demos Desktop
Google Chart Google Maps
Google Tutorials GridView
HTML5 JavaScript
Rs.1,499 Rs.699
Jquery JSON
Linq Menus
MS-Excel Plug-in
Responsive Reviews
Send Email Smartphone
Rs.999 Rs.1,289
SQL Server SqlBulkCopy
SqlDataSource VBA
WCF Web API
Web Service XML

Online Tools
Rs.249 Rs.429

Image Resizer
Percentage (%) Calculator
Hex to RGB Converter
Rs.111 Rs.399

Subscribe via email

Enter your email id Sign Me Up!


Rs.390 Rs.969
Delivered by FeedBurner

Copyright © 2017 Encodedna.com, all rights reserved.


TOP

http://www.encodedna.com/gridview/tutorial/add-values-from-textbox-to-gridview-using-jquery.htm 8/8

You might also like