How to get the text value from textbox which is in Gridview using Javascript

Question

Hi all I have written the following script to get the value from the textbox which is in GridView but I am getting some value as NaNcan some one tell where I went wrong

This is my sample script

var grid = document.getElementById("<%=grdInvoice.ClientID%>");
            var inputs = grid.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].type == "text") {
                    if (inputs[i].name.indexOf("txtAmount").value != "") {
                        alert("Not Null");
                        amnt = parseInt(inputs[i].name.indexOf("txtAmount").value);
                        alert(amnt.toString()); // Getting Nan here
                        //var v = document.getElementById('<%= lblTotal.ClientID %>').value;
                    }
                }
            }

My grid is as follows

 ddl    Quantity  desc     Rate    Amount
        1         d        10      10
        2         d        20      40

Like that some empty rows will also be there I need to sum the Amount and display

My grid view

<asp:GridView ID="grdInvoice" runat="server" AutoGenerateColumns="False" GridLines="None"
                        Width="650px" CellPadding="2" CellSpacing="1" ForeColor="#333333" CssClass="inv_grid_data"
                        OnSelectedIndexChanged="grdInvoice_SelectedIndexChanged" OnSelectedIndexChanging="grdInvoice_SelectedIndexChanging"
                        Style="font-family: verdana; font-size: 9px;">
                        <RowStyle BackColor="#f1f1f2" ForeColor="#333333" BorderColor="#333333" BorderStyle="Solid"
                            BorderWidth="1px" />
                        <HeaderStyle CssClass="inv_grid_hed" BackColor="#f2f2f2" ForeColor="black" Font-Names="Verdana,Arial,Helvetica,sans-serif"
                            Font-Size="9px" Height="15px" Font-Bold="false" />
                        <AlternatingRowStyle CssClass="tr2" BackColor="White" ForeColor="#284775" />
                        <Columns>
                            <asp:TemplateField HeaderText="Item Name" HeaderStyle-Width="140">
                                <ItemTemplate>
                                    <asp:DropDownList ID="ddlItems" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlItems_SelectedIndexChanged"
                                        DataTextField="LineItemName" DataValueField="LineItemName" CssClass="txt_box_ssm_drop"
                                        Width="100%" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size="12px">
                                    </asp:DropDownList>
                                </ItemTemplate>
                                <HeaderStyle Width="180px" />
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Quantity">
                                <ItemTemplate>
                                    <asp:TextBox ID="txtQuantity" CssClass="txt_box_ssm_big" runat="server" Width="100%"></asp:TextBox>
                                </ItemTemplate>
                                <HeaderStyle Width="100px" />
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Description">
                                <ItemTemplate>
                                    <asp:TextBox ID="txtDescription" CssClass="txt_box_ssm_big" runat="server" Width="100%"></asp:TextBox>
                                </ItemTemplate>
                                <%--<ItemStyle Height="11px" Width="100px" /> --%>
                                <HeaderStyle Width="260px" />
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Rate">
                                <ItemTemplate>
                                    <asp:TextBox ID="txtRate" ReadOnly="true" CssClass="txt_box_ssm_big" runat="server"
                                        Width="100%"></asp:TextBox>
                                </ItemTemplate>
                                <HeaderStyle Width="100px" />
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Amount">
                                <ItemTemplate>
                                    <asp:TextBox ID="txtAmount" runat="server" CssClass="txt_box_ssm_big" Width="100%"></asp:TextBox>
                                    <%--<asp:Label ID="lblamount" runat="server" Text='<%# Eval("Amount") %>'/>--%>
                                </ItemTemplate>
                                <HeaderStyle Width="100px" />
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Delete">
                                <ItemTemplate>
                                    <%--<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/images/icon_delete.gif" OnClick="RowDelete_Click" OnClientClick="msg('Can you get there from here?','This is a Title')"/>--%>
                                    <asp:ImageButton ID="RowDelete" runat="server" ImageUrl="~/images/icon_delete.gif"
                                        OnClick="RowDelete_Click" OnClientClick="return showConfirm()" Style="margin-left: 15px;" />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:CommandField ShowSelectButton="true" ButtonType="image" SelectImageUrl="~/Invoiceimages/Copy-32(1).png"
                                SelectText="Copy" HeaderText="Copy" />
                        </Columns>
                        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                        <EditRowStyle BackColor="#999999" />
                    </asp:GridView>

My original script initially I will add AMount in the grid view based on user quantity after that I Would like to display the total amount in the grid to a label

<script type="text/javascript">
        function multiplication(txtQuantity, txtRate, txtAmount) {
            var weight = document.getElementById(txtQuantity).value;
            var rate = document.getElementById(txtRate).value;
            document.getElementById(txtAmount).value = weight * rate;
            var amnt = 0;
//            var Grid_Table = document.getElementById('<%= grdInvoice.ClientID %>');
//            for (var row = 1; row < Grid_Table.rows.length; row++) {

//                var qty = 0;

//                for (var col = 0; col < Grid_Table.rows[row].cells.length; col++) {

//                    var cellcollectin = Grid_Table.rows[row].cells[col];

//                    for (var j = 0; j < cellcollectin.childNodes.length; j++) {

//                        if (cellcollectin.childNodes[j].type == "text") {

//                            if (cellcollectin.childNodes[j].name.indexOf("txtAmount") > 1) {
//                                if (cellcollectin.childNodes[j].value != "") {
//                                    qty = parseInt(cellcollectin.childNodes[j].value);
//                                    amnt = amnt + qty;
//                                }
//                            }
//                        }
//                    }
//                }
//            }
                        var grid = document.getElementById("<%=grdInvoice.ClientID%>");
                        var inputs = grid.getElementsByTagName("input");
                        for (var i = 0; i < inputs.length; i++) {
                            if (inputs[i].type == "text") {
                                if (inputs[i].name.indexOf("txtAmount").value != "") {
                                    alert("Not Null");
                                    amnt = grid.rows[i].cells[1].childNodes[0].value;
                                    //amnt = parseInt(inputs[i].name.indexOf("txtAmount").value);
                                    alert(amnt.toString());
                                    //var v = document.getElementById('<%= lblTotal.ClientID %>').value;
                                }
                            }
                        }
            document.getElementById('<%= lblTotal.ClientID %>').innerHtml = amnt.toString();
        }
    </script>

Solution 1

After all here is the solution

<script type="text/javascript">
    function multiplication(txtQuantity, txtRate, txtAmount) {
        var col1;
        var totalcol1 = 0;
        var weight = document.getElementById(txtQuantity).value;
        var rate = document.getElementById(txtRate).value;
        document.getElementById(txtAmount).value = weight * rate;
        var grid = document.getElementById('<%=grdInvoice.ClientID %>');


        for (i = 0; i < grid.rows.length; i++) {
            col1 = grid.rows[i].cells[4];
            //col2 = grid.rows[i].cells[1];

            for (j = 0; j < col1.childNodes.length; j++) {
                if (col1.childNodes[j].type == "text") {
                    if (!isNaN(col1.childNodes[j].value) && col1.childNodes[j].value != "") {
                        totalcol1 += parseInt(col1.childNodes[j].value)
                    }
                }
            }
        }
        document.getElementById('<%= lblTotal.ClientID %>').innerHTML = totalcol1.toFixed(2).toString();
    }
</script>

Solution 2

There is a problem in your code, Javascript's indexOf() either returns -1 or positive integer, value is the property of input textbox and has nothing to do with indexOf().

Replace your code with this:

    var grid = document.getElementById("<%=grdInvoice.ClientID%>");
    var inputs = grid.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == "text") {
            if (inputs[i].name == "txtAmount" || inputs[i].id == "txtAmount") {
                amnt = parseInt(inputs[i].value);
                alert(amnt.toString());
            }
        }
    }

Comments

[Developer]

Not one value present I would like to loop through the text boxes that are available in grid view

[Vishal Suthar]

And where you are calling that javascript function..?

[Developer]

let us continue this discussion in chat

[Software Engineer]

There is a typo here parseInt(grid.rows[i].cells[2].childNodes[0].value;);. Remove the inner semicolon ;

[Developer]

I am having a master page with gridview then is it correct way of finding if (inputs[i].name == "txtAmount")

[Software Engineer]

If the ID of your textbox gets changed then you have to set its ClientID first: txtCtrl.ClinetID = "txtAmount"; See the webpage html source in browser and try to find txtAmount if it is not there that means its ID had changed.

[Developer]

How can I do that in javascript

[Developer]

I already sending as below curTexbox.Attributes.Add("onBlur", "return multiplication('" + curTexbox.ClientID + "','" + curTexbox1.ClientID + "',curTextbox2.ClientID");

[Software Engineer]

1) Make the IDs of controls unique by appending a count integer either in markup. 2) Place alerts in client-side code to see id, value etc of your desired textbox controls. 3) See my updated answer.

[Shiro]

Please explain your code in addition to posting it.