代码之家 › 专栏 › 技术社区 › Scott Saunders

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

javascript

Scott Saunders · 技术社区 · 15 年前

我有一个非常简单的表单,其中有一个名称字段和两个提交按钮:“更改”和“删除”。提交表单时,我需要在javascript中进行一些表单验证,因此我需要知道单击了哪个按钮。如果用户点击Enter键,“Change”值就是进入服务器的值。所以说真的,我只需要知道是否点击了“删除”按钮。

我能确定点击了哪个按钮吗?还是需要将“删除”按钮从“提交”更改为常规按钮,并捕获其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"] 是一个节点列表,不是我可以获取的单个元素的值。

11 回复 | 直到 8 年前

Glen Little 15 年前

您也可以使用 onclick 事件以多种不同的方式解决问题。

例如:

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

在 TryingToDelete() 在javascript中执行函数,然后执行所需的操作 return false 如果不想继续删除。

cllpse 15 年前

这里有一个 不引人注目的方法 使用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属性引用元素,因此必须更新标记。如果您希望我更新我的答案中的代码以使用name属性来确定适当的操作,请通知我。

ps. 15 年前

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

Christoph 15 年前

一些浏览器(至少是火狐、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 按钮本身的处理程序。

Catfish 15 年前

为每个按钮提供一个唯一的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,则执行其中的任何操作

Wojciech Dynus 10 年前

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

Michael Stone 15 年前

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

你所需要的只是简单地跟随 w3schools

Alex Beardsley 15 年前

因为您没有提到使用任何框架,所以这是使用纯JavaScript实现这一点的最干净的方法。通过这段代码,您要做的就是将button对象本身传递到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>

Patanjali 8 年前

一点击窗体中任何位置的事件都将被窗体的点击处理程序(只要单击的元素允许它传播)。它将在表单的提交事件。

因此,可以测试click目标是否是输入 (或) 按钮标签提交键入并保存它的值(例如, 数据按钮 用于处理表单中的提交处理程序。

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

我需要这样做来更改表单的行动和目标属性,取决于单击哪个提交按钮。

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

-1

Michael Greene 15 年前

-1

s4y 15 年前

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

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

click submit

$.fn.data()

$.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);
    }
});