Question

我有一个非常简单的表单，其中包含名称字段和两个提交按钮：'更改'和'删除'。我需要在提交表单时在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"]是一个节点列表，而不是我可以获取值的单个元素。

Answer 1

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

例如：

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

在JavaScript中的TryingToDelete()函数中，执行您想要的操作，然后return false如果不希望继续执行删除操作。

Answer 2

这是一个使用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-property引用元素，因此您必须更新标记。如果您希望我更新我的答案中的代码以使用name-attribute来确定适当的操作，请告诉我。

Answer 3

<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>

Answer 4

有些浏览器（至少是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个处理程序。

Answer 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，请执行其中的任何内容

Answer 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);

Answer 7

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

您需要的就像遵循w3schools

上的内容一样简单

Answer 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>

Answer 9

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

因此，可以测试点击目标是input类型的button（或submit）标记，并保存它的值（例如，保存到{{ 1}}表单上的属性）用于处理表单的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;
 }
}

Answer 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);
});

Answer 11

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

Answer 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);
    }
});

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

12 个答案: