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

您可以转动＆＃34;输入=＆＃39;提交＆＃39;＆＃34;到＆＃34;键入=＆＃39;按钮＆＃39;＆＃34;所以它不提交表单并听按钮点击：

$("#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

如果您不使用表单的提交事件，并且需要使用按钮事件触发器，那么您应该执行以下操作：

$('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 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

试试这个

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

Answer 5

您可以在处理new FormData(form)事件（其中submit是对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)
{
    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);
}

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

一个表单中的两个提交按钮。提交功能中的事件可以知道哪一个？

5 个答案: