Javascript 一个表单中有两个提交按钮。submit函数中的事件是否可以知道是哪一个？

我想知道在JQuery中，这是否可能：

<form id="testform">
    <input type="text" id="hi" name="hi" />
    <input type="text" id="bye" name="bye" />

    <button type="submit" id="submit1">Use Me</button>
    <button type="submit" id="submit2">No, Use Me </button>
</form>


$('#testform').submit(function(e) {

    e.preventDefault();

    var submiturl;

    if (e.name === 'submit1') { submiturl = '../sendToFactory.cshtml'; }
    else if (e.name === 'submit2') { submiturl = '../sendOverseas.cshtml'; }

    $.ajax({
        url: submiturl,
        data: $('testform').serialize(),
        type: 'POST',
        datatype: 'json',
        success: function (response) {
            //stuff
        },
        error: function (response) {
            //error
        }
    });
});

利用我
不，用我
$（'#testform'）。提交（函数（e）{
e、 预防默认值（）；
var亚图尔；
如果（e.name=='submit1'）{submitur='../sendToFactory.cshtml'；}
else if（e.name==='submit2'）{submitur='../sendOverseas.cshtml'；}
$.ajax({
网址：submitur，
数据：$（'testform'）。序列化（），
键入：“POST”，
数据类型：“json”，
成功：功能（响应）{
//东西
},
错误：函数（响应）{
//错误
}
});
});

我知道

e.name

是不对的，但一定有办法做类似的事情，不是吗

我使用的是IE9及以上版本。

您可以将“type='submit'”改为“type='button'”，这样它就不会提交表单，并可以听到按钮的点击：

$("#testform button[type=button]").click(function (e) {
    var submitUrl;
    switch ($(e.target).attr('id')) {
        case 'submit1':
            submitUrl = 'url1.cshtml';
            break;
        case 'submit2':
            submitUrl = 'url2.cshtml';
            break;
    }

    $.ajax({
                //...
    })
});

---

如果不使用表单的submit事件，并且需要使用button事件触发器，则应执行以下操作：

$('button').click(function(e){
var id$ = $(this).attr('id');
e.preventdefault();

var submiturl;

if (id$ == 'submit1') { submiturl = '../sendToFactory.cshtml'; }
else if (id$ == 'submit2') { submiturl = '../sendOverseas.cshtml'; }

$.ajax({
    url: submiturl,
    data: $('testform').serialize(),
    type: 'POST',
    datatype: 'json',
    success: function (response) {
        //stuff
    },
    error: function (response) {
        //error
    }
    });
});

---

您可以维护表单，只需将其他事件添加到设置中，该按钮称为提交

var form_config={button:null}；
$（“#提交1”）。单击（函数（）{
form_config.button='submit1'；
});
$（“#提交2”）。单击（函数（）{
form_config.button='submit2'；
});
$（'#testform'）。提交（函数（e）{
控制台日志（e）；
e、 预防默认值（）；
var亚图尔；
if（form_config.button==='submit1'）{submitur='../sendToFactory.cshtml'；}
else if（form_config.button=='submit2'）{submitur='../sendoseas.cshtml'；}
$（“#hi”）.val（submitur）；
});

利用我
不，用我
试试这个

$(document).ready(function() {
    $( "form" ).submit(function () {
        // Get the submit button element
        var btn = $(this).find("button:focus").val();
        alert(btn);
        //DO YOUR AJAX
    });
});

在处理
submit
事件时，您可以从
newformdata（form）
中提取信息，其中
form
是对
元素的引用。请注意，处理事件时必须提取信息，因为即使经过事件循环（例如
setTimeout（…，0）
），提交按钮信息也已丢失

因此，现在您可以做一些类似于将
作为
表单
引用的事情：

form.addEventListener('submit', function(event)
{
    event.preventDefault();
    var formdata = new FormData(form);
    formdata.append(event.submitter.name, event.submitter.value);
    ...
    xhr.send(formdata);
}

事件.submitter
将包含对提交表单的表单按钮的引用

如果表单可能有多个
submit
事件处理程序，并且其中一个或多个可能会在提交表单之前修改表单上的数据（例如TinyMCE），则您可能需要执行以下操作

form.addEventListener('submit', function(event)
{
    event.preventDefault();
    let form = this;
    let formdata = new FormData(form);
    let submitter = event.submitter;
    setTimeout(function()
    {
        let formdata = new FormData(form);
        formdata.append(submitter.name, submitter.value);
        xhr.send(formdata);
    }, 0);
}

setTimeout（…，0）
将允许所有现有的
submit
处理程序运行，并且在继续收集表单数据并发送XHR之前，整个事件循环将清空。
您应该绑定
单击提交按钮上的事件，而不是表单
提交
event@ApulGupta-好的，但是为什么？显然，我对submit函数和事件参数的工作方式有误解。因此，解释一下为什么我需要使用click而不是submit来完成这项工作，比使用指令要好得多。如果你不想麻烦的话，好吧。但我只是把它放在一般的回答者那里。当你可以做
e.target.id
时，你为什么要做
$（e.target）.attr（'id'）
？你为什么只为了得到id而调用
jQuery
？事件处理程序应该只做它自己的事情，然后离开。调用
jQuery
要慢得多。（为了安全起见，以我的例子来说，你应该使用
（e.target | |{id:'}）.id
），它仍然会比
jQuery
）更好@IsmaelMiguel，你是对的，但就我个人而言，我并不关心0.001%的性能提升。此外，jQuery还负责跨浏览器兼容性。只要每个浏览器都支持“e.target.id”语法，您的解决方案就可以工作。但是，如果，比如说1337版本的IE，由于某种原因改变了它，它就不会。好吧，IE是一种癌症，但是如果
e.target.id
中断，那么所有对象都不会工作。例如：
document.getElementsByTagName（'body'）[0]。style.backgroundColor
也会中断。这将使大多数现有的图书馆和网站变得无用。你是对的。这只是我的个人风格。在大多数情况下，我在click event listener中执行更复杂的逻辑，而不仅仅是获取.id，这就是为什么我的反应是“我希望首先从target获得jQuery”。您从哪里获得了
$this
？为什么要创建名为
id$
的全局变量？
$此
是由单击事件生成的jquery对象。关于全局变量，我写这段代码很快，作为一个示例，而不是一个好用的代码，您显然应该做
var id$=…
注意：
$this
是单击按钮的jquery元素。
未捕获异常：引用错误：未定义变量：$this
在Windows XP SP3 x86的Opera 12.17上使用jquery 1.11.0。我的很抱歉，您应该使用
$（此）我真的很快写了这段代码。对不起，基本上e参数无法知道单击了哪个按钮。这就是问题的症结所在吗？好吧，事件目标将始终是表单，因为这就是事件所连接到的。这段代码强烈要求发生错误。我永远不会用这个。为什么要用一个只有1个值的对象创建一个全局变量？为什么不在
submit
处理程序中的
if
中抛出
submitur
的值呢？为了使其具有最低限度的可用性，您必须将其封装在函数中。之所以使用该对象，是因为我假设他想做的事情的复杂性可能是可变的，他可以设置不同的属性，无论什么，利用具有可读性和可理解的编码约定的封装数据是一种良好的设计实践。“form_config”是表单的配置，它非常简单，真的，你很不高兴，因为我没有为这个用例做配置？我觉得你的批评无效。没有人认为这是一个有趣的答案