带有两个提交按钮的提交表单，每个按钮执行不同的操作问题

Question

我有一个 JSP 页面，上面有标准格式。我有两个按钮，每个按钮在按下时执行不同的操作，然后提交表单 - 操作 1 和操作 2。

我最初是为一个按钮设置的，所以这一切都通过以下方式完成并且工作正常：

$('#form').submit( function() { .... }

但是现在我有两个按钮，我希望它做同样的事情，但是如何找到我按下了哪个按钮。

我可以通过 .click 功能做到这一点，但我不想破坏我现有的 form.submit 功能。

以下是我的代码 - 不起作用：

    $('#form').submit( function() {

        // Set the field array variables with data
        $('button[name="action1"], [name="action2"]').each(function(index) {
            alert('index : ' + index );
            alert('value : ' + this.value);
        });

        $('button[name="action1"]').click(function(e) { 
            alert('ac1 clicked');
        }); 

        $('button[name="action2"]').click(function(e) { 
            alert('ac2 clicked');
        }); 

我的 html 按钮是：

            <button id="submitButton" name="action1" value="action1" type="submit">action 1</button>
            <button id="submitButton" name="action2" value="action2" type="submit">action 2</button>

有没有一种方法可以在我的 form.submit 中执行此操作，或者有一种方法可以执行 .click，然后提交表单。我对这个问题的解决方案有点迷茫？

请帮忙:)

Answer 1

可以读取事件对象的相关目标。

$('#form').on('submit', function(evt) {
    if (evt.relatedTarget && $(relEl).is('input[type=submit]')) {
        /* related element is a button - do something */
    }
    evt.preventDefault(); //cancel form submit, as required
});

Answer 2

在按钮的点击处理程序中，在提交表单之前设置一个隐藏字段。然后在请求处理程序中读取该隐藏字段的值以找出请求的操作。

Answer 3

将事件处理程序绑定到您的按钮

$('button').on('click', function(e) {
    var buttonId = $(this).attr('name');
    if(buttonId = 'action1') {
        // action1 was pressed
    } else {
        // action2 was pressed
    }

    $('#form').trigger('submit'); // trigger submit of form.

    e.preventDefault();
});

Answer 4

首先，永远不要在同一页面上包含两个具有相同 id 的 dom 元素。 class 属性适用于此类事情。将按钮的 id 分别更改为 submitButton1 和 submitButton2，然后这应该可以工作：

$('#submitButton1').closest('#form').submit(function() {
    // first button action
});

$('#submitButton2').closest('#form').submit(function() {
    // second button action
});

Answer 5

对于标准 HTML 表单提交：

HTML：

<form method="..." action="...">
    ...
    <input type="hidden" name="action">
    <input value="action1" type="submit" value="action 1" />
    <input value="action2" type="submit" value="action 2" />
    ...
</form>

Javascript：

$('button[type="submit"]').on('click', function() {
    $("#action").val(this.value);//where "#action" selects an input field (in the same form) of type="hidden"
});

对于 AJAX 提交，执行相同操作，但将操作字段的值读回提交处理程序中的 javascript。