Adding runat server to HTML control giving error

Question

I want to access aHTML control on server side, but while adding runat= server, it is giving me error as

'chkA1<%# (Container.RecordIndex) %>' is not a valid identifier.

Here is my html

<input type="checkbox" runat="server" id="chkA1<%# (Container.RecordIndex)%>" name="chkAC1" style="width: 17px; 
                                                height: 17px;" value="<%# (Container.RecordIndex)%>" onclick="AppoveCheckA(this)" />

When I remove runat=server it works properly.

Why it is not working with runat=server. Any suggestion

UPDATE

The Id's are changing accordingly of the checkboxes. Here is the code which I have written

var checkBoxID;
    var status;
    var arrA = [];
    var arrB = [];
    var rowIndex
    function AppoveCheckA(chk) {
        status = true;
        checkBoxID = $(chk).attr("id");
        funClientSelectAfter(status, checkBoxID);
    }
    function AppoveCheckB(chk) {
        status = true;
        checkBoxID = $(chk).attr("id");
        funClientSelectAfter1(status, checkBoxID);
    }

    function funClientSelectAfter(status, checkBoxID) {
        if (status && checkBoxID != null) {
            var len = checkBoxID.length;

            if (len >= 7) {
                rowIndex = checkBoxID.substring(checkBoxID.length - 2, checkBoxID.length);
            }
            else {
                rowIndex = checkBoxID.substring(checkBoxID.length - 1, checkBoxID.length);

            }
            for (var col = 1; col <= 4; col++) {
                if (("chkA" + col + rowIndex) == checkBoxID) {
                    if (document.getElementById("chkA" + col + rowIndex).checked == true) {
                        $("#chkA" + col + rowIndex).attr("checked", true);
                        arrA[rowIndex] = col;
                        continue;
                    }
                    else
                        arrA[rowIndex] = 0
                }
                $("#chkA" + col + rowIndex).attr("checked", false);
            }
            document.getElementById("hidRateA").value = arrA.join();
            // alert(document.getElementById("hidRateA").value);
        }
    }

score 1 · Accepted Answer · answered Mar 07 '16 at 04:30

1

The ID is going to be a strongly typed identifier in C#. Therefore the ID can't change and it can't contain invalid characters.

The simple solution is to just remove that from your id attribute.

<input type="checkbox" runat="server" id="chkA1" name="chkAC1" style="width: 17px; height: 17px;" value="<%# (Container.RecordIndex)%>" onclick="AppoveCheckA(this)" />

answered Mar 07 '16 at 04:30

mason

31,774
10
77
121

the `id's` are changing but, there are many rows in the gridview and id changes accordingly – Nad Mar 07 '16 at 04:31
@coder Add the code accessing this input into your question. – mason Mar 07 '16 at 04:33
@coder What about the server side code? And on the client side, you don't have to access it by ID. You can use CSS classes are even the value of other attributes (such as value). – mason Mar 07 '16 at 04:42

Adding runat server to HTML control giving error

1 Answers1