按了哪個提交按鈕？

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小提琴演示 。

---

編輯在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小提琴演示 。

Answer 2

您需要為每個執行以下操作的按鈕添加onClick處理程序：

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

Answer 3

將功能分配給提交按鈕的單擊事件。 該函數應該只是將單擊按鈕的值存儲在變量中。 在表單的submit事件中，檢查該變量的值。 click事件將在click事件后觸發，因此您應該能夠獲得預期的結果。

在這里演示

這里需要注意的是，處理多個提交按鈕時，不同瀏覽器的行為會有所不同; 特別是當你按Enter鍵提交表格時。 我想我的例子可以解決這個問題。

Answer 4

這是我如何解決這個問題，

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事件上submit而不在click事件上submit 。 這樣，無論單擊按鈕，在表單域中單擊返回還是以實用方式提交，都可以使用一個常用函數來提交表單。

我也希望盡可能地使事物變得通用並將它們變成模式。 如果您想出一些模式，例如將每個提交按鈕命名為.btn-form-submit並具有data-value屬性來存儲值，則這兩個函數可以在整個項目中工作。

Answer 5

當您使用一個form並使用$('form').live('submit', function() {和兩個submit按鈕都是相同的形式，因此在submit事件中不可能。您必須使用一兩個click事件form標簽。