Using Javascript, why are all the values coming up null from multiple dropdowns in ASP.Net grdiview

Question

This is my first time working with ASP.Net...I don't understand some of the things that are happening, but what is going on is that I have a asp.net gridview template that has a dropdown, a checkbox, text, and then a value all in one row. There are multiple rows like this. When a specific checkbox is checked, it should be grabbing the value in the 4th 'td' for the row that it is in, and multiply that value to the value of the drop down that is also in that same row. I am having trouble grabbing the specific value of the selected drop down option. This line of code keeps throwing this error "Uncaught TypeError: Cannot read property 'value' of undefined".

quantity = cell0.childnodes[1].value;

Can someone point me in the right direction to accessing the values in the drop downs?

<script>
    function calculateTotal(chk) {

        var grid = document.getElementById('<%= grvAddon.ClientID %>');
        var inputs = grid.getElementsByTagName("input");
        var totalcol1 = 0;
        var quantity = 1;

        //loop starts from 1. rows[0] points to the header.
        for (i = 1; i < grid.rows.length; i++) {
            //get the reference of first column
            //cell is the checkboxes
            cell = grid.rows[i].cells[1];
            //cell4 is the values (text)
            cell4 = grid.rows[i].cells[4];
            //cell0 is the dropdowns
            cell0 = grid.rows[i].cells[0];

            //loop according to the number of childNodes in the cell
            for (j = 0; j < cell.childNodes.length; j++) {


                if (chk.type == "checkbox" && chk.checked) {

                    for (h = 0; h < cell4.childNodes.length; h++) {

                        if (cell4.childNodes[h].type == "text") {


                            quantity = cell0.childnodes[1].value;
                            totalcol1 += parseInt(cell4.childNodes[h].value * quantity)
                        }
                    }

                }
            }
        }



        var fee = $('[id$=txtHandlingFee]').val();
        var policyclaims1 = document.getElementById('<%= lblPolicyPrice.ClientID %>').innerText;
        totalcol1 = parseInt(totalcol1) + parseInt(policyclaims1) + parseInt(fee);
        document.getElementById('<%= lblPricing.ClientID %>').innerHTML = totalcol1.toFixed(2).toString();

    }

Here is the grid section I am trying to access.

                            <asp:GridView ID="grvAddon" runat="server" AutoGenerateColumns="False" GridLines="None">
                             <Columns>
                                                  
                                    <asp:TemplateField >
                                        <ItemTemplate>
                                            <asp:DropDownList ID="cblAddon" runat="server" onchange ="calculateTotal(this);" ></asp:DropDownList>
                                        </ItemTemplate>                                        
                                    </asp:TemplateField>

score 0 · Answer 1 · answered Dec 20 '19 at 19:56

You can access all the DropDownList by class and get the values. Say you have the following GridView

<asp:GridView ID="GridView1" runat="server" CssClass="MyGV" >
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>

                <asp:DropDownList ID="DropDownList1" runat="server" CssClass="MyDDL">
                    <asp:ListItem>Item 1</asp:ListItem>
                    <asp:ListItem>Item 2</asp:ListItem>
                    <asp:ListItem>Item 3</asp:ListItem>
                </asp:DropDownList>

            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

You can now get the values of all elements with the class MyDLL in the GridViews with class MyGV.

<script>
    function calculateTotal() {
        $('.MyGV .MyDDL').each(function (index, element) {
            console.log('Row ' + index + ' value: ' + $(this).val());
        });
    }
</script>

Using Javascript, why are all the values coming up null from multiple dropdowns in ASP.Net grdiview

1 Answers1