How to handle the onClick event for each input type submitted using jQuery?

advertisements

I'm new to jQuery... Still learning it. But I need a quick solution to be able to register click event for each button in my table.

The following table is generated by GridView:

<div id="gridView">
                 <div>
    <table cellspacing="0" border="1" style="border-color:Red;border-collapse:collapse;position:absolute; top: 290px;" id="MainContent_grvIsoSearchResults" rules="all">
        <tbody><tr>
            <th scope="col">ISONUM</th><th scope="col">OFFICE NAME</th><th scope="col">REGION</th><th scope="col">DIVISION</th><th scope="col">EMAIL ADDRESS</th>
        </tr><tr>
            <td>
                                <span style="display:inline-block;width:70px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvIsoNum_0">222222222 </span>
                            </td><td>
                                <span style="display:inline-block;width:200px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvIsoOfficeName_0">My Test</span>
                            </td><td>
                                <span style="display:inline-block;width:50px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvRegion_0">99</span>
                            </td><td>
                                <span style="display:inline-block;width:50px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvDivision_0">11111</span>
                            </td><td>
                                <input type="text" style="width:200px;" onclick="ResetMessage();" id="MainContent_grvIsoSearchResults_txtgvEmailAddress_0" value="[email protected]" name="ctl00$MainContent$grvIsoSearchResults$ctl02$txtgvEmailAddress">
                                <input type="submit" id="MainContent_grvIsoSearchResults_btnEmailUpdate_0" value="Update" name="ctl00$MainContent$grvIsoSearchResults$ctl02$btnEmailUpdate">
                            </td>
        </tr><tr>
            <td>
                                <span style="display:inline-block;width:70px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvIsoNum_1">CB2222001 </span>
                            </td><td>
                                <span style="display:inline-block;width:200px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvIsoOfficeName_1">DENNIS PETROVIC          </span>
                            </td><td>
                                <span style="display:inline-block;width:50px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvRegion_1"></span>
                            </td><td>
                                <span style="display:inline-block;width:50px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvDivision_1">99801</span>
                            </td><td>
                                <input type="text" style="width:200px;" onclick="ResetMessage();" id="MainContent_grvIsoSearchResults_txtgvEmailAddress_1" value="[email protected]" name="ctl00$MainContent$grvIsoSearchResults$ctl03$txtgvEmailAddress">
                                <input type="submit" id="MainContent_grvIsoSearchResults_btnEmailUpdate_1" value="Update" name="ctl00$MainContent$grvIsoSearchResults$ctl03$btnEmailUpdate">
                            </td>
        </tr><tr>
            <td>
                                <span style="display:inline-block;width:70px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvIsoNum_2">FT2222001 </span>
                            </td><td>
                                <span style="display:inline-block;width:200px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvIsoOfficeName_2">DENNIS PETROVIC          </span>
                            </td><td>
                                <span style="display:inline-block;width:50px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvRegion_2"></span>
                            </td><td>
                                <span style="display:inline-block;width:50px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvDivision_2">99801</span>
                            </td><td>
                                <input type="text" style="width:200px;" onclick="ResetMessage();" id="MainContent_grvIsoSearchResults_txtgvEmailAddress_2" value="[email protected]" name="ctl00$MainContent$grvIsoSearchResults$ctl04$txtgvEmailAddress">
                                <input type="submit" id="MainContent_grvIsoSearchResults_btnEmailUpdate_2" value="Update" name="ctl00$MainContent$grvIsoSearchResults$ctl04$btnEmailUpdate">
                            </td>
        </tr>
    </tbody></table>
</div>

This table has a Button on each row, I just need to make sure that when button is clicked I will call my web service method to update a text field on the same row, but for that I need first to catch that event. I want to do it through jQuery/Ajax although I could have done it differently, this is preferred way in this case.

Any suggestions?

Thank you

---UPDATE---

I tried every suggestion given here, but for some reason, when clicking on the button, nothing happen. Is that possible that it may be related to my grid not generating any html for a table when viewing source for my page? The source I provided before, I got using firebug.

$( document ).on("click", "#gridView input[type='submit']", function(){
   /* here is your clicked button's ID */
   console.log( "ID : "+ $(this).attr("id") );
   /* here is your clicked button's NAME */
   console.log( "NAME : "+ $(this).attr("name") );
   /* now call your web service using jquery Ajax */
   callService( $(this).attr("id"), $(this).attr("name") );
});

function callService( id, name ) {
    $.ajax({
      type: 'POST', /* can be GET or POST */
      url: 'your web service url', /* your web service's url */
      data: { id : id, name : name }, /* post varibales */
      dataType : 'your data type', /* expected data types can be XML, JSON, HTML */
      success: function(data){ /* get called when response from your web service arrived */
         /* 'data' has the response data */
         console.log(data);
        /* you can get the text box of same row like */
         $( "#"+ id ).prev().val( /* set value for text box */ );
      }
   });
}

Related Articles

how to handle the click event on each cell in a table layout

I have a table layout which is as simple as this one. What I need is to allowed end user to click each cell of the table, and do something on each cell. But, it seems android table layout only support row based on click event, no cell based on click

How to handle the onClick event on imageSpan in editText?

i am working on an app in which user choose an image from gallery and it will be added in editText, now i want if user click on image in editText it should open in fullScreen, i used below code :- public void addToEdt(Bitmap bitmap){ SpannableString

wpf: how to handle the KeyDown event for Datagrid?

I have a problem with datagrid control in wpf . when I press enter I want to load selected items in a set of controls, but it seems that datagrid.KeyDown is already handled and it goes to the next item. I tried using keyup but this event fires when t

How to handle the clickbox event in datatables

I have a boolean field like a flag to state that row is deleted or not in the table. It displayed using checkbox, so if the data has been deleted, the checkbox value is true and vice versa. Below is the code to display the table: <table id="tblEve

How to get the painting event for buttons in QT

i am new to QT, i tried lot searching samples of how to get the button paint event in QT.. i am not getting the way to do it.. how to set the delegates for pushbutton in QT?. how to get the paint event for pushbutton? i read so many articles, it says

Cancel the onclick event for a column in the table

I've done some digging and been unable to find a solution to this little problem. I have a table where I've made each row clickable using: <tr class="clickable" onclick="window.document.location='$link';"> I'd like to make this w

get the last event for each eventtype of the table

This question already has an answer here: How to select records with maximum values in two columns? 2 answers I have a table with events, their time stamps and some errorcode and would like to get the latest occurrence for each of them. I am using or

asp: LinkButton, how to cancel the OnClick event?

I have searched for hours, but I am lost. Is there any way to Cancel a OnClick() event from an asp:LinkButton command? I have the following client side code: <asp:LinkButton ID="LinkButton3" runat="server" CausesValidation="Fal

How to handle the drag event on an enlarged window

I have an MFC application running in Win7 with no Titlebar (i.e. My title bar is home-cooked, with custom buttons for restore, maximize and close). In Win7 it responds to the maximize event generated by the Win 7 API when a user drags the window to t