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

已编辑以解决评论中的问题，来自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

为提交按钮的click事件分配一个函数。该函数应该只是将单击按钮的值存储在变量中。在表单的submit事件中，检查该变量的值。 click事件将在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属性来存储值，则这两个函数可以在整个项目中使用。

按了哪个提交按钮？

5 个答案:

HTML

的Javascript