按下了哪个提交按钮？

Question

在这个jsfiddle中

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

我是否提交了自动生成的按钮。每个表格行都有一个唯一的 ID 号，如果需要，每个提交按钮也可以获得相同的唯一编号。

问题

问题是有多个提交按钮，我怎么知道哪个被按下了？

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

你可以使用delegate():

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

JS Fiddle demo.

---

编辑以解决 cmets 中的问题，来自 OP：

是否可以使用这种方法显示 0 或 1 作为关联复选框的状态？

是的，这是可能的，虽然它比我想要的要啰嗦一点：

$('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

您需要为每个按钮添加一个 onClick 处理程序：

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

Answer 3

为提交按钮的点击事件分配一个函数。该函数应该简单地将单击按钮的值存储在变量中。在表单的提交事件中，检查该变量的值。 submit 事件将在 click 事件之后触发，因此您应该能够获得预期的结果。

Demo here

这里要注意的是，不同的浏览器在处理多个提交按钮时表现不同；特别是当您按 Enter 提交表单时。我认为我的示例解决了这个问题。

Answer 4

当您使用一个form 和$('form').live('submit', function() { 时，两个submit 按钮的形式相同，因此在submit 事件中是不可能的。您必须使用click 事件或两个form 标签。

Answer 5

这是我解决这个问题的方法，

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.
});

这里的优点是您的表单仅在 submit 事件上提交，而不是在 click 事件上提交。这样，您可以使用一个通用功能来提交表单，无论您是单击按钮、在表单字段中按回车键还是务实地提交表单。

我也喜欢让事物尽可能通用并将它们转化为模式。如果您想出一些模式，例如将每个提交按钮的值命名为 .btn-form-submit 并使用 data-value 属性来存储值，那么这两个函数可以在您的整个项目中使用。