Question

In this jsfiddle

http://jsfiddle.net/littlesandra88/eGRRb/

have I submit buttons that are auto-generated. Each table row gets an unique ID number, and if needed each submit button can get the same unique number as well.

Question

The problem is that there are multiple submit buttons, so how do I know which was pressed?

HTML

<form action="" method="post">
    <table class="alerts tablesorter" id="accTable" cellspacing="0">
        <thead> 
            <tr class="header">
                <th class="activity-header"> A </th>
                <th class="activity-header"> Signed </th>
                <th class="activity-header">  </th>
            </tr>
        </thead> 

        <tbody>      

            <tr class="row" id="7249">
                <td class="activity-data">7249</td>
                <!-- tablesorter can't sort a column with check boxes out-of-the-box, so it needs something to sort on. That is why the span tag is here -->
                <!-- a jquery script is watching the state of the checkbox, so when clicked the value in the span is updated -->
                <td class="checkbox"> <span style="display:none;">0</span> <input name="signed" type="checkbox" > </td>
                <td class="edit-column"> <input value="Save" type="submit" name="7249"></td>
            </tr>

            <tr class="row" id="61484">
                <td class="activity-data">61484</td>
                <td class="checkbox"> <span style="display:none;">1</span> <input name="signed" type="checkbox" checked > </td>
                <td class="edit-column"> <input value="Save" type="submit" name="61484"></td>
            </tr>

        </tbody>
    </table>
</form>

JavaScript

$(document).ready(function() {
    $("#accTable").tablesorter();

    // :checkbox stops from executing the event on the save button. Same as input[type=checkbox]
    $('#accTable input:checkbox').click(function() {
        // insert 1 or 0 depending of checkbox state in the tag before the input tag. In this case <span> is before <input>
        // this is done so tablesorter have something to sort on, as it doesn't support checkbox sort out of the box.
        var order = this.checked ? '1' : '0';
        $(this).prev().html(order);

        $(this).parents("table").trigger("update");
    });
});

// sends the form content to server side, and stay on page
$('form').live('submit', function() {

    alert('test');

    // don't redirect
    return false;
});

Answer 1

You could use delegate():

$('form').delegate('input:submit','click',
                   function(){
                       alert(this.name);
                       return false;
                   });

JS Fiddle demo.

---

Edited to address question in the comments, from OP:

Would it be possible to display 0 or 1 as the state of the associated checkbox with this approach?

Yeah, that’s possible, though it’s a little more long-winded than I’d like:

$('form').delegate('input:submit','click',
                   function(){
                       var idString = this.name;
                       var checkboxState = $('#' + idString).find('input:checkbox').is(':checked');

                       if (checkboxState == true){
                           alert('1');
                       }
                       else {
                           alert('0');
                       }
                       return false;
                   });

JS Fiddle demo.