Which submit button was pressed?

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.

Answer 2

You will need to add an onClick handler to each button that does:

$(this).closest('form').data('submit_name', this.name);

Answer 3

Assign a function to the click event of the submit buttons. That function should simply store the clicked button's value in a variable. Inside the submit event of the form, check the value of that variable. The submit event will fire after the click event so you should be able to get the expected result.

Demo here

The thing to note here is that that different browsers behave differently when dealing with multiple submit buttons; specially when you hit enter to submit the form. I think my example takes care of this.

Answer 4

Here is how I solve this,

HTML

<form id="my-form" ...>
    ....
    <a href="#my-form" class="btn-form-submit" data-value="save">Save</a>
    <a href="#my-form" class="btn-form-submit" data-value="save-and-add">Save and add another</a>
</form>

Javascript

$('.btn-submit-form').on('click', function(ev){
    ev.preventDefault();
    var $form = $(this).attr('href');
    if ($form.length > 0) {
        $form.trigger('submit', {'submitBtn': $this});
    }
});


$('form').on('submit', function(ev, extra) {
    if (extra && extra.submitBtn) {
        var submitVal = extra.submitBtn.attr('data-value');
    } else {
        var submitVal = null;
    }

    // submit the form as you want with submitVal as one of the fields.
});

The advantage here is that your form only submits on the submit event and not on click event. This way you can have one common function to submit the form whether you click a button, hit return in a form field or submit it pragmatically.

I also like to make things as generic as possible and turn them into patterns. This two functions can work across your whole project if you come up with some patterns like naming each submit button with value as .btn-form-submit and having a data-value attribute to store the value.

Answer 5

As you are using one form and using $('form').live('submit', function() { and both submit buttons are in the same form so its not possible in submit event. You have to use click event or two form tags.