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

Question

我想知道在 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
        }
    });
});

我知道e.name 不对，但一定有办法做类似的事情，不是吗？

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

Answer 1

您可以将“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({
                //...
    })
});

Answer 2

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

It turns out that latest browsers do not populate FormData with the submit button anymore. 所以现在你可以做如下的事情，参考<form> 元素为form：

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

event.submitter 将包含对提交表单的表单按钮的引用。

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

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

setTimeout(..., 0) 将允许所有现有的submit 处理程序运行，并在继续收集 FormData 并发送 XHR 之前将整个事件循环排空。

Answer 3

您可以维护表单，只需添加额外的事件来设置哪个按钮称为提交。

var form_config = {button: null};

$("#submit1").click(function(){
  form_config.button = 'submit1';  
});

$("#submit2").click(function(){
  form_config.button = 'submit2';  
});

$('#testform').submit(function(e) {
    console.log(e);
    e.preventDefault();

    var submiturl;

    if (form_config.button === 'submit1') { submiturl = '../sendToFactory.cshtml'; }
    else if (form_config.button  === 'submit2') { submiturl = '../sendOverseas.cshtml'; }
    $("#hi").val(submiturl);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>

Answer 4

如果你不使用表单的提交事件，而你需要使用按钮事件触发器，那么你应该这样做：

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

Answer 5

试试这个

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