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

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
}