How to get the id of textbox created at runtime in a gridview in javascript.

Question

I have a editable gridview. When I click on edit button corresponding to a row in the gridview I provide two textboxes to enter two new values.2 textboxes as I have 2 columns. Now this textbox are generated at runtime.I want to access this textbox in javascript and perform validation on them.This is the html syntax.

<table cellspacing="0" rules="all" border="1" id="TableGridView" style="border-collapse:collapse;table-layout:fixed">
            <tr>
                <th scope="col"><b>Action</b></th><th scope="col"><b>PROCESSOR_ID</b></th><th scope="col"><b>PROCESSOR_NAME</b></th>
            </tr><tr>
                <td><input type="image" name="TableGridView$ctl02$edit_button" id="TableGridView_ctl02_edit_button" title="Edit" src="images/edit.gif" style="border-width:0px;" /><input type="image" name="TableGridView$ctl02$delete_button" id="TableGridView_ctl02_delete_button" title="Delete" src="images/delete.gif" onclick="return confirm('Are you sure you want to delete the record?');" style="border-width:0px;" /><input type="image" name="TableGridView$ctl02$insert_button" id="TableGridView_ctl02_insert_button" title="Insert" src="images/insert.bmp" style="border-width:0px;" /></td><td><span id="TableGridView_ctl02_PROCESSOR_ID">23</span></td><td><span id="TableGridView_ctl02_PROCESSOR_NAME">dasdas</span></td>
            </tr><tr>
                <td><input type="image" name="TableGridView$ctl03$edit_button" id="TableGridView_ctl03_edit_button" title="Edit" src="images/edit.gif" style="border-width:0px;" /><input type="image" name="TableGridView$ctl03$delete_button" id="TableGridView_ctl03_delete_button" title="Delete" src="images/delete.gif" onclick="return confirm('Are you sure you want to delete the record?');" style="border-width:0px;" /><input type="image" name="TableGridView$ctl03$insert_button" id="TableGridView_ctl03_insert_button" title="Insert" src="images/insert.bmp" style="border-width:0px;" /></td><td><span id="TableGridView_ctl03_PROCESSOR_ID">123</span></td><td><span id="TableGridView_ctl03_PROCESSOR_NAME">asdasdas</span></td>
            </tr><tr>
                <td><input type="image" name="TableGridView$ctl04$update_button" id="TableGridView_ctl04_update_button" title="Add" src="images/update.gif" onclick="return (textfieldvalidation());" style="border-width:0px;" /><input type="image" name="TableGridView$ctl04$cancel_button" id="TableGridView_ctl04_cancel_button" title="Cancel" src="images/cancel.gif" style="border-width:0px;" /></td><td><input name="TableGridView$ctl04$PROCESSOR_ID" type="text" id="TableGridView_ctl04_PROCESSOR_ID" /></td><td><input name="TableGridView$ctl04$PROCESSOR_NAME" type="text" id="TableGridView_ctl04_PROCESSOR_NAME" /></td>
            </tr><tr>
                <td><input type="image" name="TableGridView$ctl05$edit_button" id="TableGridView_ctl05_edit_button" title="Edit" src="images/edit.gif" style="border-width:0px;" /><input type="image" name="TableGridView$ctl05$delete_button" id="TableGridView_ctl05_delete_button" title="Delete" src="images/delete.gif" onclick="return confirm('Are you sure you want to delete the record?');" style="border-width:0px;" /><input type="image" name="TableGridView$ctl05$insert_button" id="TableGridView_ctl05_insert_button" title="Insert" src="images/insert.bmp" style="border-width:0px;" /></td><td><span id="TableGridView_ctl05_PROCESSOR_ID">6456</span></td><td><span id="TableGridView_ctl05_PROCESSOR_NAME">dg</span></td>
            </tr>
        </table>

I 'have' to use IE 6.0.

I have already tried document.getElementbyID for the table and getElementsByTagName adn they are not working.

var curValue = document.getElementById("<%=TableGridView.ClientID%>").rows; curValue is 1 in IE and 4 in firefox.

Answer 1

Use jquery for this, as it has cross browser support

$.each("#TableGridView tr td input",function(){
    alert($(this).attr("id"));
});

Answer 2

Here I am giving the Example how you will do that here the java script code

enter code here

// JScript File

//This method is used to add rows if email field is validated function addRows(tableID) { if(validate(this.obj)) { var emailTableRow = document.getElementById("ctl00_ContentPlaceHolder1_EmailTableRow").value;

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;


        var lastRow;
        if (emailTableRow == '') {
            emailTableRow = "'1'";
            lastRow = 1;
        }
        else 
        {

            lastRow = emailTableRow.substr(emailTableRow.lastIndexOf(",") + 2, emailTableRow.lastIndexOf("'") - (emailTableRow.lastIndexOf(",") + 2));


        }

        var newRow = parseInt(lastRow) + 1;

        emailTableRow = emailTableRow + ",'" + newRow.toString() + "'";

        document.getElementById("ctl00_ContentPlaceHolder1_EmailTableRow").value = emailTableRow;


        var row = table.insertRow(rowCount);


        var cell0 = row.insertCell(0);

    cell0.style.marginLeft="0px";
cell0.style.width="200px";
cell0.style.height="12px";
//cell0.style.line-height="12px";
cell0.style.paddingLeft="0px";
cell0.style.background="#70b9ee";
cell0.style.fontFamily="Trebuchet MS";
cell0.style.fontSize="11px";
cell0.style.fontWeight="normal";
cell0.style.color="#fff";
cell0.style.textAlign="center";
cell0.style.border="0px solid #000";

        var element0 = document.createElement("label");
        element0.innerHTML = newRow;
        element0.setAttribute("size", "3");

        element0.setAttribute("name", "lblRownumber" + newRow.toString());
        element0.setAttribute("id", "lblRownumber" + newRow.toString());
        cell0.appendChild(element0);



        var cell1 = row.insertCell(1);
        cell1.style.marginLeft="0px";
cell1.style.width="200px";
cell1.style.height="12px";
//cell0.style.line-height="12px";
cell1.style.paddingLeft="0px";
cell1.style.background="#70b9ee";
cell1.style.fontFamily="Trebuchet MS";
cell1.style.fontSize="11px";
cell1.style.fontWeight="normal";
cell1.style.color="#fff";
cell1.style.textAlign="center";
cell1.style.border="0px solid #000";
        var element1 = document.createElement("input");
        element1.type = "text";

        element1.setAttribute("name", "txtEMAIL_ADDRESS" + newRow.toString());
        element1.setAttribute("id", "txtEMAIL_ADDRESS"+ newRow.toString());

        cell1.appendChild(element1);


        var cell2 = row.insertCell(2);

        cell2.style.marginLeft="0px";
cell2.style.width="200px";
cell2.style.height="12px";
//cell0.style.line-height="12px";
cell2.style.paddingLeft="0px";
cell2.style.background="#70b9ee";
cell2.style.fontFamily="Trebuchet MS";
cell2.style.fontSize="11px";
cell2.style.fontWeight="normal";
cell2.style.color="#fff";
cell2.style.textAlign="center";
cell2.style.border="0px solid #000";
        var element2 = document.createElement("input");
        element2.setAttribute("name", "txtName"+newRow.toString());
        element2.setAttribute("id", "txtName"+newRow.toString());
        element2.type = "text";
        cell2.appendChild(element2);



        var cell3 = row.insertCell(3);

        cell3.style.marginLeft="0px";
cell3.style.width="200px";
cell3.style.height="12px";
//cell0.style.line-height="12px";
cell3.style.paddingLeft="0px";
cell3.style.background="#70b9ee";
cell3.style.fontFamily="Trebuchet MS";
cell3.style.fontSize="11px";
cell3.style.fontWeight="normal";
cell3.style.color="#fff";
cell3.style.textAlign="center";
cell3.style.border="0px solid #000";
        var element3 = document.createElement("input");
        element3.setAttribute("name", "txtPROMOTIONAL_COMPAIGN"+newRow.toString());
        element3.setAttribute("id", "txtPROMOTIONAL_COMPAIGN"+newRow.toString());
        element3.type = "text";
        cell3.appendChild(element3);


        var row = table.insertRow(rowCount+1);


        var cell0 = row.insertCell(0);
        cell0.colSpan = 4;
        cell0.style.textAlign = "left";
        cell0.style.paddingLeft = "0px"
        cell0.style.fontWeight="normal";
        cell0.style.fontSize="11px";

cell0.style.fontFamily="Trebuchet MS"; cell0.style.marginLeft="0px"; //cell0.style.margin="0px"; // cell0.style.width="200px"; // cell0.style.height="20px"; // cell0.style.line-height="12px"; cell0.style.paddingLeft="5px"; cell0.style.background="#70b9ee"; // cell0.style.font-family="Trebuchet MS"; // cell0.style.font-size="11px"; // cell0.style.font-weight="normal"; cell0.style.color="#fff"; // cell0.style.text-align="left"; //cell0.style.border="0px solid #000";

        var element0 = document.createElement("label");
        element0.innerHTML ="Please feel free to change the Text";
        element0.setAttribute("size", "100");

        element0.setAttribute("name", "lblMessage" + newRow.toString());
        element0.setAttribute("id", "lblMessage" + newRow.toString());
        element0.setAttribute("class","srn-td-space3");
        cell0.appendChild(element0);




        var row = table.insertRow(rowCount+2);



            var cell0 = row.insertCell(0);
            cell0.colSpan = 4;
            cell0.style.textAlign = "left";
        cell0.style.paddingLeft = "5px"
        cell0.style.fontWeight="normal";
        cell0.style.fontSize="11px";

cell0.style.fontFamily="Trebuchet MS"; cell0.style.marginLeft="1px"; // cell0.style.width="200px"; // cell0.style.height="20px"; // cell0.style.line-height="12px"; // cell0.style.paddingLeft="0px"; cell0.style.background="#70b9ee"; // cell0.style.font-family="Trebuchet MS"; // cell0.style.font-size="11px"; // cell0.style.font-weight="normal"; cell0.style.color="#fff"; // cell0.style.text-align="left"; //cell0.style.border="0px solid #000";

            var element0 = document.createElement("textarea");

            element0.setAttribute("cols", "50");

            element0.setAttribute("rows", "4");
            element0.setAttribute("name", "txtAreaEmailBody" + newRow.toString());
            element0.setAttribute("id", "txtAreaEmailBody" + newRow.toString());
            cell0.appendChild(element0);







   }

        return false;

}

//This method is used to Validate Email..... function validate(formobj) {

var emailPattern = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/;

var getWorkFields;

getWorkFields = getFieldRequired('ctl00_ContentPlaceHolder1_SendmailsTable', 'ctl00_ContentPlaceHolder1_EmailTableRow', 'txtEMAIL_ADDRESS');

var fRequired = getWorkFields;

var fieldRequired = fRequired.split(",");

var validRegExp = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/i;
var email = document.getElementById(fieldRequired).value;


if (email == "") {
    alert("email cannot be empty");
     return false;
}
else {

    if (email.search(validRegExp) == -1) {

        alert(" A valid E-mail is required");

        return false;
    }
    else {
        return true;
    }

}

} //This method is used to Generate Ids Dynamically function getFieldRequired(tableID, hiddenFieldID, filedNamePrefix) {

    try {
        var returnValue = '';
        var accRow = document.getElementById(hiddenFieldID).value;

        if (accRow == null || accRow == '')
            accRow = "'1'";

        var arrayString;
        arrayString = accRow.toString().split(",");


        aFieldPrefix = filedNamePrefix.toString().split(",");

        var I = parseInt(0);
        var J = parseInt(0);
        for (I = 0; I < arrayString.length; I++) {
            for (J = 0; J < aFieldPrefix.length; J++) {
                if (I == 0 && J == 0)
                {
                    returnValue = aFieldPrefix[J] + arrayString[I].replace("'", "").replace("'", "");

                 }
                else
                {
                    returnValue = aFieldPrefix[J] + arrayString[I].replace("'", "").replace("'", "");

                }

            }
        }

        return returnValue;

    }
    catch (e) {
        alert(e);
    }

}

Answer 3

You should pass the reference of the clicked element and avoid playing with ID's.

<input type="image" ... onclick="return textfieldvalidation(this)"...

And the function

function textfieldvalidation(button){

  var tr = button.parentNode.parentNode,
      inputs = tr.getElementsByTagName('INPUT'), //all INPUT tags of the TR
      id = inputs[0].getAttribute('id'); //or inputs[0].id
}