我可以确定在 javascript 中使用了哪个提交按钮吗？答案

【问题标题】：Can I determine which Submit button was used in javascript?我可以确定在 javascript 中使用了哪个提交按钮吗？
【发布时间】：2010-02-19 18:25:12
【问题描述】：

我有一个非常简单的表单，其中包含一个名称字段和两个提交按钮：“更改”和“删除”。提交表单时，我需要在 javascript 中进行一些表单验证，因此我需要知道单击了哪个按钮。如果用户按下回车键，“更改”值就是将其发送到服务器的值。所以真的，我只需要知道是否点击了“删除”按钮。

我可以确定点击了哪个按钮吗？还是我需要将“删除”按钮从提交更改为常规按钮并捕获其 onclick 事件以提交表单？

表格如下所示：

 <form action="update.php" method="post" onsubmit="return checkForm(this);">
    <input type="text" name="tagName" size="30" value="name goes here" />
    <input type="hidden" name="tagID" value="1" />
    <input type="submit" name="submit" value="Change" />
    <input type="submit" name="submit" value="Delete" />
 </form>

在checkForm() 函数中，form["submit"] 是一个节点列表，不是我可以获取其值的单个元素。

【问题讨论】：

各位，请不要在不发表评论的情况下随意投反对票...
看起来有人在没有任何解释的情况下通过并否决了大部分答案。
不发表评论就拒绝投票只是懦弱。看起来有人比他们对答案的问题更无聊，这里的每个人都至少有一个-1。

标签： javascript

【解决方案1】：

这是一个使用 jQuery 的不显眼的方法...

$(function ()
{
    // for each form on the page...
    $("form").each(function ()
    {
        var that = $(this); // define context and reference

        /* for each of the submit-inputs - in each of the forms on
           the page - assign click and keypress event */
        $("input:submit", that).bind("click keypress", function ()
        {
            // store the id of the submit-input on it's enclosing form
            that.data("callerid", this.id);
        });
    });


    // assign submit-event to all forms on the page
    $("form").submit(function ()
    {
        /* retrieve the id of the input that was clicked, stored on
           it's enclosing form */
        var callerId = $(this).data("callerid");

        // determine appropriate action(s)
        if (callerId == "delete") // do stuff...

        if (callerId == "change") // do stuff...

        /* note: you can return false to prevent the default behavior
           of the form--that is; stop the page from submitting */ 
    });
});

注意：此代码使用 id 属性来引用元素，因此您必须更新标记。如果您希望我更新答案中的代码以使用名称属性来确定适当的操作，请告诉我。

【讨论】：

【解决方案2】：

您还可以通过多种不同方式使用onclick 事件来解决问题。

例如：

<input type="submit" name="submit" value="Delete" 
       onclick="return TryingToDelete();" />

在 JavaScript 的 TryingToDelete() 函数中，做你想做的事，然后 return false 如果不想继续删除。

【讨论】：

太棒了！不需要将函数调用绑定到表单；它也适用于按钮。
这个问题和答案现在都超过3年了。今天，我将使用 JQuery 并将事件绑定到按钮。但是，如果您在页面上没有做太多的 javascript，这种方法仍然有效。
3 年前使用 jQuery 的理由比现在多得多。

【解决方案3】：

一些浏览器（至少 Firefox、Opera 和 IE）支持这个：

<script type="text/javascript">
function checkForm(form, event) {
    // Firefox || Opera || IE || unsupported
    var target = event.explicitOriginalTarget || event.relatedTarget ||
        document.activeElement || {};

    alert(target.type + ' ' + target.value);
    return false;
}
</script>
<form action="update.php" method="post" onsubmit="return checkForm(this, event);">
   <input type="text" name="tagName" size="30" value="name goes here" />
   <input type="hidden" name="tagID" value="1" />
   <input type="submit" name="submit" value="Change" />
   <input type="submit" name="submit" value="Delete" />
</form>

对于一个固有的跨浏览器解决方案，您必须将onclick 处理程序添加到按钮本身。

【讨论】：

document.activeElement 适用于 chrome、firefox、opera、IE8、IE9 和 IE11。 event.explicitOriginalTarget 也适用于 Firefox。我无法检查 safari，但它现在基于 chrome，所以我假设它像 chrome 一样工作
不要假设一个按钮被点击了，它可能是在一个文本字段上被按下的，除了target.value之外检查target.type
唉，这在 Safari 上不起作用，document.activeElement 是正文。见more comparisons here。

【解决方案4】：

<html>
<script type="text/javascript">
var submit;
function checkForm(form)
{
alert(submit.value);
return false;
}

function Clicked(button)
{
  submit= button ;
}
</script>
<body>
 <form method="post" onsubmit="return checkForm(this);">
    <input type="text" name="tagName" size="30" value="name goes here" />
    <input type="hidden" name="tagID" value="1" />
    <input onclick="Clicked(this);" type="submit" name="submit" value="Change" />
    <input onclick="Clicked(this);" type="submit" name="submit" value="Delete" />
 </form>
 </body>
</html>

【讨论】：

@ps: 投票表决；除了风格问题之外，您的答案没有任何问题 - 除了它不处理用户通过在 IE 的文本字段中按 enter 键提交表单的情况（IE 不会为此使用提交按钮，但其他浏览器可以）
OP 提出了一个非常具体的问题。 “所以真的，我只需要知道‘删除’按钮是否被点击。我能确定点击了哪个按钮吗？”我回答了这个问题。 :)

【解决方案5】：

给每个按钮一个唯一的ID，例如

<input type="submit" id="submitButton" name="submit" value="Change" />
<input type="submit" id="deleteButton" name="submit" value="Delete" />

我不确定如何在原始 javascript 中执行此操作，但在 jquery 中您可以执行此操作

$('#submitButton').click(function() {
  //do something
});
$('#deleteButton').click(function() {
  //do something
});

这表示如果单击 submitButton，则执行其中的任何操作。如果单击 deleteButton，则执行其中的任何操作

【讨论】：

您可以根据元素的 id 抓取元素并对其执行操作。
其中一项操作会告诉我按钮是否被点击了吗？

【解决方案6】：

在 jQuery 中，您可以使用 $.data() 将数据保留在范围内 - 在这种情况下不需要全局变量。首先单击提交按钮，然后（取决于它的操作）将数据分配给表单。我没有阻止点击事件中的默认操作，因此在点击事件结束后立即提交表单。

HTML：

<form action="update.php" method="post"">
    <input type="text" name="tagName" size="30" value="name goes here" />
    <input type="hidden" name="tagID" value="1" />
    <input type="submit" name="submit" value="Change" />
    <input type="submit" name="submit" value="Delete" />
</form>

JavaScript：

 (function ($) {
        "use strict";
        $(document).ready(function () {

            // click on submit button with action "Change"
            $('input[value="Change"]').on("click", function () {
                var $form = $(this).parents('form');
                $form.data("action", "Change");
            });

            // click on submit button with action "Delete"
            $('input[value="Delete"]').on("click", function () {
                var $form = $(this).parents('form');
                $form.data("action", "Delete");
            });

            // on form submit
            $('form').on("submit", function () {
                var $self = $(this);

                // retrieve action type from form
                // If there is none assigned, go for the default one
                var action = $self.data("action") || "deafult";

                // remove data so next time you won't trigger wrong action
                $self.removeData("action");

                // do sth depending on action type
                if (action === "change") {
                }
            });
        });
    })(jQuery);

【讨论】：

【解决方案7】：

现在您遇到的问题与普通文本输入相同。您在两个不同的元素上具有相同的名称。将名称更改为“更改”和“删除”，然后通过在两个提交上应用事件处理程序并提供不同的方法来确定是否单击了其中一个。我假设您使用的是纯 JavaScript，但如果您希望它更快，请查看 jQuery。

您需要的很简单，只需关注w3schools 上的内容即可

【讨论】：

【解决方案8】：

由于您没有提到使用任何框架，因此这是使用直接 Javascript 的最简洁的方法。使用此代码，您正在做的是将按钮对象本身传递给 go() 函数。然后，您可以访问按钮的所有属性。你不必对 setTimeout(0) 或任何其他古怪的函数做任何事情。

<script type="text/javascript">
    function go(button) {
        if (button.id = 'submit1')
            //do something
        else if (button.id = 'submit2')
            //do something else
    }
</script>

<form action="update.php" method="post">
    <input type="text" name="tagName" size="30" value="name goes here" />
    <input type="hidden" name="tagID" value="1" />
    <input id="submit1" type="submit" name="submit" value="Change" onclick="go(this);"/>
    <input id="submit2" type="submit" name="submit" value="Delete" onclick="go(this);"/>
</form>

【讨论】：

【解决方案9】：

表单中任何位置的click 事件都将被表单的click 处理程序捕获（只要单击的元素允许它传播）。它将在表单的submit 事件之前处理。

因此，可以测试点击目标是否为submit 类型的input（或button）标签，并保存它的值（例如，保存到表单上的data-button 属性）用于在表单的 submit 处理程序中进行处理。

提交按钮本身不需要任何事件处理程序。

我需要这样做来更改表单的 action 和 target 属性，具体取决于单击的提交按钮。

// TO CAPTURE THE BUTTON CLICKED    
function get_button(){
 var oElement=event.target;
 var oForm=oElement.form;
 
 // IF SUBMIT INPUT BUTTON (CHANGE 'INPUT' TO 'BUTTON' IF USING THAT TAG)
 if((oElement.tagName=='INPUT')&&(oElement.type=='submit')){
  // SAVE THE ACTION
  oForm.setAttribute('data-button',oElement.value);
 }
}

// TO DO THE SUBMIT PROCESSING    
function submit_form(){
 var oForm=event.target;

 // RETRIEVE THE BUTTON CLICKED, IF ONE WAS USED     
 var sAction='';
 if(oForm.hasAttribute('data-button')){
  // SAVE THE BUTTON, THEN DELETE THE ATTRIBUTE (SO NOT USED ON ANOTHER SUBMIT)     
  sAction=oForm.getAttribute('data-button');
  oForm.removeAttribute('data-button');
 }

 // PROCESS BY THE BUTTON USED     
 switch(sAction){
  case'Change':
   // WHATEVER
   alert('Change');
   break;
  case'Delete':
   // WHATEVER
   alert('Delete');
   break;
  default:
   // WHATEVER FOR ENTER PRESSED
   alert('submit: By other means');
   break;
 }
}

 <form action="update.php" method="post" onsubmit="submit_form();" onclick="get_button();">
    <input type="text" name="tagName" size="30" value="name goes here" />
    <input type="hidden" name="tagID" value="1" />
    <input type="submit" name="submit" value="Change" />
    <input type="submit" name="submit" value="Delete" />
 </form>
 <p id="result"></p>

【讨论】：

【解决方案10】：

这是我的解决方案：只需在提交按钮中添加数据集，如下所示：

<form action="update.php" method="post" onsubmit="return checkForm(this);">
    <input type="text" name="tagName" size="30" value="name goes here" />
    <input type="hidden" name="tagID" value="1" />
    <input type="submit" name="submit" value="Change" data-clicked="change" />
    <input type="submit" name="submit" value="Delete" data-clicked="delete" />
</form>

在 JS 中通过以下方式访问它：

$('body').on("submit", function(event){
  var target = event.explicitOriginalTarget || event.relatedTarget || document.activeElement || {};
  var buttonClicked = target.dataset['clicked'];
  console.log(buttonClicked);
});

【讨论】：

【解决方案11】：

将删除按钮命名为其他名称。也许命名一个 SubmitChange 并命名另一个 SubmitDelete。

【讨论】：

这无济于事。据我观察，提交表单时不会传输提交按钮的值。
提交按钮的值在按下/单击时传输。如果不存在，则按下默认提交按钮，可能是通过在表单输入字段之一上按 Enter 键。
名称更改如何帮助我确定点击了哪个？我需要在 javascript 中知道，而不是在 update.php 页面上。
确实如此。我的回答只是帮助您解决冲突的名称。您可能想要做的是将每个提交按钮更改为常规 type="button" 按钮。为每一个分配一个 onclick，并在它们各自的 onclick 处理程序中调用 document.forms["formname"].submit();
我不推荐这个 - 如果禁用 JS 会破坏页面

【解决方案12】：

我自己一直在处理这个问题。没有内置方法可以判断哪个按钮正在提交表单，但它是一项可能会在未来出现的功能。

我在生产中使用的解决方法是将按钮存储在某处，以便在单击时进行一个事件循环。 JavaScript 可能看起来像这样：

function grabSubmitter(input){
    input.form.submitter = input;
    setTimeout(function(){
        input.form.submitter = null;
    }, 0);
}

...你会在每个按钮上设置一个 onclick：

<input type="submit" name="name" value="value" onclick="grabSubmitter(this)">

click 在submit 之前触发，因此在您的提交事件中，如果您的表单上有提交者，则单击了一个按钮。

我使用的是 jQuery，所以我使用 $.fn.data() 而不是 expando 来存储提交者。我有一个小插件来处理临时设置元素上的数据，如下所示：

$.fn.briefData = function(key, value){
        var $el = this;
        $el.data(key, value);
        setTimeout(function(){
            $el.removeData(key);
        }, 0);
    };

然后我将它附加到这样的按钮上：

$(':button, :submit').live('click', function () {
    var $form = $(this.form);
    if ($form.length) {
        $form.briefData('submitter', this);
    }
});

【讨论】：