使用JavaScript访问分配给单击的提交按钮的值

Question

我注意到了一件很普通的事情。当HTML表单中有几个提交按钮时，如下所示：

<button type="submit" name="submit_button", value="b1"></button>
<button type="submit" name="submit_button", value="b2"></button>
<button type="submit" name="submit_button", value="b2"></button>

..and您可以执行以下操作：

var $form = $('#my_html_form');
$form.submit(function() {
        if (!checkPassed && !hasRequiredValue) {
            bootbox.confirm('Are you sure that you don\'t need <strong>{requiredValue}</strong> parameter?', function(result) {
                if (result) {
                    checkPassed = true;
                    $form.submit();
                }
            });
            return false;
        }        
});

字段submit_button根本不会被提交，它只是没有出现在请求数据中。

有没有办法强制JS将数据与单击的submit按钮的值一起提交？

我只想补充一点，如果表单是用PHP而不是JS提交的，那么submit_button字段就会出现，它的值是b1、b2或b3 --这取决于所单击的按钮。

附注:我只是认为问题的根源可能是我使用的是<button>而不是<input>。但是，正如我所说的，使用PHP是很好的。

Answer 1

只有成功的提交按钮才会包含在表单数据中。

成功的提交按钮是用于提交表单的按钮。

您的JavaScript在提交事件上运行，并且：

• 始终取消表单的提交
• 有时会使用JS

提交表单

由于您使用JS而不是submit按钮提交表单，因此没有一个submit按钮是成功的。

更改您的JS，使其：

• 有时会取消表单

的提交

例如：

$form.submit(function() {
    // Add a NOT condition here
    if (!<someCondition>) {
        return false;
    }
    return true;
});

关于更新：

好的，所以您总是取消提交，并使用基于DOM的小部件来请求确认。

在这种情况下，您需要单独捕获submit按钮的值。

该信息不会公开给submit事件，因此需要在submit按钮的click事件上公开。

将隐藏输入添加到表单：

<input type="hidden" name="submit_button">

然后添加另一个事件处理程序：

$form.on("click", '[name="submit_button"]', function (event) {
    $form.find('[type="hidden"][name="submit_button"]').val(
        $(this).val()
    );
});

Answer 2

是的，您可以获取按钮的值

$('button').click(function(event) {
    var button = $(this).data('clicked', $(event.target));
    var value = button.val();
});

Answer 3

这就是你要的。

$("button[name=submit_button]").click(function() {
  alert($(this).val());
});

小提琴：http://jsfiddle.net/tw698hvs/