Get value of each ASP.Net GridView Row DropDownList and TextBox using JavaScript

Hi mukesh1,

Check below example.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="Description">
            <ItemTemplate>
                <asp:Label ID="lblCustomerID" runat="server" Text='<%#Eval("CustomerID") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Video Type">
            <ItemTemplate>
                <ul>
                    <li>
                        <b>Video Type 1</b>
                        <asp:DropDownList ID="ddlVideoType1" runat="server">
                            <asp:ListItem Text="Select Type" Value="-1"></asp:ListItem>
                            <asp:ListItem Text="YouTube" Value="YouTube"></asp:ListItem>
                            <asp:ListItem Text="Vimeo" Value="Vimeo"></asp:ListItem>
                        </asp:DropDownList>

                    </li>
                    <li>
                        <b>Video Type 2</b>
                        <asp:DropDownList ID="ddlVideoType2" runat="server">
                            <asp:ListItem Text="Select Type" Value="-1"></asp:ListItem>
                            <asp:ListItem Text="YouTube" Value="YouTube"></asp:ListItem>
                            <asp:ListItem Text="Vimeo" Value="Vimeo"></asp:ListItem>
                        </asp:DropDownList>
                        <asp:Label ID="lblContactName" runat="server" Visible="false" Text='<%#Eval("ContactName") %>'></asp:Label>
                    </li>
                    <li>
                        <b>Video Type 3</b>
                        <asp:DropDownList ID="ddlVideoType3" runat="server">
                            <asp:ListItem Text="Select Type" Value="-1"></asp:ListItem>
                            <asp:ListItem Text="YouTube" Value="YouTube"></asp:ListItem>
                            <asp:ListItem Text="Vimeo" Value="Vimeo"></asp:ListItem>
                        </asp:DropDownList>
                        <asp:Label ID="lblContactTitle" runat="server" Visible="false" Text='<%#Eval("ContactTitle") %>'></asp:Label>
                    </li>
                    <li>
                        <b>Video Type 4</b>
                        <asp:DropDownList ID="ddlVideoType4" runat="server">
                            <asp:ListItem Text="Select Type" Value="-1"></asp:ListItem>
                            <asp:ListItem Text="YouTube" Value="YouTube"></asp:ListItem>
                            <asp:ListItem Text="Vimeo" Value="Vimeo"></asp:ListItem>
                        </asp:DropDownList>
                        <asp:Label ID="lblAddress" runat="server" Visible="false" Text='<%#Eval("Address") %>'></asp:Label>
                    </li>
                </ul>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Video URL">
            <ItemTemplate>
                <ul>
                    <li>
                        <b>Video URL 1</b>
                        <asp:TextBox ID="txtCity" Text='<%#Eval("City") %>' runat="server"></asp:TextBox>
                    </li>
                    <li>
                        <b>Video URL 2</b>
                        <asp:TextBox ID="txtPostalCode" Text='<%#Eval("PostalCode") %>' runat="server"></asp:TextBox>
                    </li>
                    <li>
                        <b>Video URL 3</b>
                        <asp:TextBox ID="txtCountry" Text='<%#Eval("Country") %>' runat="server"></asp:TextBox>
                    </li>
                    <li>
                        <b>Video URL 4</b>
                        <asp:TextBox ID="txtPhone" Text='<%#Eval("Phone") %>' runat="server"></asp:TextBox>
                    </li>
                </ul>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Button ID="btnSelect" runat="server" Text="Select" OnClientClick="return ValidateGridRows(this)" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<script type="text/javascript">
    function ValidateGridRows(ele) {
        var myGrid = document.getElementById("<%= gvCustomers.ClientID %>");
        var tr = ele.parentNode.parentNode;
        var dropDownLists = tr.cells[1].getElementsByTagName('SELECT');
        var textBoxs = tr.cells[2].getElementsByTagName('INPUT');
        var ddls = {};
        for (var i = 0; i < dropDownLists.length; i++) {
            var id = dropDownLists[i].id.split("_")[1];
            if (id == "ddlVideoType1") {
                ddls.ddl1 = dropDownLists[i].options[dropDownLists[i].selectedIndex].text;
            }
            if (id == "ddlVideoType2") {
                ddls.ddl2 = dropDownLists[i].options[dropDownLists[i].selectedIndex].text;
            }
            if (id == "ddlVideoType3") {
                ddls.ddl3 = dropDownLists[i].options[dropDownLists[i].selectedIndex].text;
            }
            if (id == "ddlVideoType4") {
                ddls.ddl4 = dropDownLists[i].options[dropDownLists[i].selectedIndex].text;
            }
        }
        var inputs = {};
        for (var i = 0; i < textBoxs.length; i++) {
            var id = textBoxs[i].id.split("_")[1];
            if (id == "txtCity") {
                inputs.city = textBoxs[i].value;
            }
            if (id == "txtPostalCode") {
                inputs.postal = textBoxs[i].value;
            }
            if (id == "txtCountry") {
                inputs.country = textBoxs[i].value;
            }
            if (id == "txtPhone") {
                inputs.phone = textBoxs[i].value;
            }
        }
        alert(JSON.stringify(ddls) + "\n\r" + JSON.stringify(inputs));
    }
</script>

Namespaces

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(conString))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT * FROM Customers", con))
            {
                using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
                {
                    using (DataTable dt = new DataTable())
                    {
                        sda.Fill(dt);
                        gvCustomers.DataSource = dt;
                        gvCustomers.DataBind();
                    }
                }
            }
        }
    }
}

Screenshot