¿Cómo puedo obtener el botón que provocó el envío desde el evento de envío de formulario?

Estoy tratando de encontrar el valor del botón enviar que activó el formulario para enviar

$("form").submit(function() {

});

Posiblemente podría disparar un evento $ ("input [type = submit]"). Click () para cada botón y establecer alguna variable, pero eso parece menos elegante que cómo quitar el botón del formulario al enviar.

Aproveché document.activeElementcomo se muestra en esta respuesta: ¿Cómo obtener el elemento enfocado con jQuery?

$form.on('submit', function() {
    var $btn = $(document.activeElement);

    if (
        /* there is an activeElement at all */
        $btn.length &&

        /* it's a child of the form */ 
        $form.has($btn) &&

        /* it's really a submit element */
        $btn.is('button[type="submit"], input[type="submit"], input[type="image"]') &&

        /* it has a "name" attribute */
        $btn.is('[name]')
    ) {
        console.log("Seems, that this element was clicked:", $btn);
        /* access $btn.attr("name") and $btn.val() for data */
    }
});

Aprovecho el hecho de que el botón siempre es el elemento enfocado después de hacer clic en él. Esto no funcionará si lo hace blur()justo después del clic.

@Doin ha detectado otro inconveniente. Si un usuario envía el formulario a través enterde un campo de texto, document.activeElementno se establece. Debería tener cuidado con esto usted mismo, manejando keypresseventos en input[type="text"]y similares.

Actualización 2017-01: para mi biblioteca Hyperform , elegí no usar activeElementsino capturar todos los eventos que conducen al envío del formulario. El código para esto está en Github.

Si usa Hyperform, así es como accedería al botón que activó el envío:

$(form).on('submit', function(event) {
  var button = event.submittedVia;
});

Implementé esto y supongo que servirá.

$(document).ready(function() {
    $("form").submit(function() { 

    var val = $("input[type=submit][clicked=true]").val()

    // DO WORK

});

y este es el evento del botón de enviar que lo configura

$("form input[type=submit]").click(function() {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
});

Gracias por las respuestas, pero esto no es tan poco elegante ...

Creé un formulario de prueba y usando Firebug encontré esta forma de obtener el valor;

$('form').submit(function(event){
  alert(event.originalEvent.explicitOriginalTarget.value);
}); 

Desafortunadamente, solo Firefox admite este evento.

Aquí hay un enfoque que parece más limpio para mis propósitos.

Primero, para todas y cada una de las formas:

$('form').click(function(event) {
  $(this).data('clicked',$(event.target))
});

Cuando se activa este evento de clic para un formulario, simplemente registra el objetivo de origen (disponible en el objeto de evento) para acceder más tarde. Este es un trazo bastante amplio, ya que se activará con cualquier clic en cualquier parte del formulario. Los comentarios de optimización son bienvenidos, pero sospecho que nunca causará problemas notables.

Luego, en $ ('form'). Submit (), puede consultar en qué se hizo clic por última vez, con algo como

if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();

Ahora hay una submitterpropiedad estándar en el evento de envío.
¡Ya implementado en Firefox 75 !

document.addEventListener('submit',function(e){
    console.log(e.submitter)
})

Para los navegadores que no lo admiten, use este polyfill :

!function(){
    var lastBtn = null
    document.addEventListener('click',function(e){
        if (!e.target.closest) return;
        lastBtn = e.target.closest('button, input[type=submit]');
    }, true);
    document.addEventListener('submit',function(e){
        if ('submitter' in e) return;
        var canditates = [document.activeElement, lastBtn];
        for (var i=0; i < canditates.length; i++) {
            var candidate = canditates[i];
            if (!candidate) continue;
            if (!candidate.form) continue;
            if (!candidate.matches('button, input[type=button], input[type=image]')) continue;
            e.submitter = candidate;
            return;
        }
        e.submitter = e.target.querySelector('button, input[type=button], input[type=image]')
    }, true);
}();

Según este enlace , el objeto Evento contiene un campo Event.target, que:

Devuelve una cadena que representa el objeto que inició el evento.

Acabo de crear una página para probar cuál es ese valor, y parece que esa representación es para el formulario en sí, no para el botón en el que se hizo clic. En otras palabras, Javascript no proporciona la posibilidad de determinar el botón en el que se hizo clic.

En cuanto a la solución de Dave Anderson , podría ser una buena idea probarla en varios navegadores antes de usarla. Es posible que funcione bien, pero no puedo decirlo de ninguna manera.

Un enfoque limpio es utilizar el evento de clic en cada botón de formulario. A continuación se muestra un formulario html con botones para guardar, cancelar y eliminar:

<form  name="formname" action="/location/form_action" method="POST">
<input name="note_id" value="some value"/>
<input class="savenote" type="submit" value="Save"/>
<input class="cancelnote" type="submit" value="Cancel"/>
<input class="deletenote" type="submit" value="Delete" />
</form> 

A continuación se muestra el archivo jquery. Envío la 'acción' apropiada a la misma función del servidor según el botón en el que se hizo clic ('guardar' o 'eliminar'). Si se hace clic en 'cancelar', simplemente recargo la página.

$('.savenote').click(function(){
   var options = {
       data: {'action':'save'}
   };
   $(this).parent().ajaxSubmit(options);
   });


$('.deletenote').click(function(){
   var options = {
       data: {'action':'delete'}
   };
   $(this).parent().ajaxSubmit(options);
   });


$('.cancelnote').click(function(){
   window.location.reload(true);
   return false;
   });

Busqué y encontré varias formas de enviar el botón de envío name+ valueal servidor usando jQuery + AJAX. No me gustaron mucho ...

¡Una de las mejores fue la solución de Hunter presentada aquí!

Pero yo mismo escribí otro.

Quiero compartir, porque es bueno y, según lo necesitaba, también funciona con formularios cargados a través de ajax (después de document.ready):

$(document).on('click', 'form input[type=submit]', function(){
    $('<input type="hidden" />').appendTo($(this).parents('form').first()).attr('name', $(this).attr('name')).attr('value', $(this).attr('value'));
});

¡Sencillo! Cuando se hace clic en el botón enviar, se agrega un campo oculto al formulario, utilizando el mismo namey valuedel botón enviar.

EDITAR: La versión a continuación es más fácil de leer. Además, se encarga de eliminar los campos ocultos previamente añadidos (en el caso de enviar el mismo formulario dos veces, lo cual es perfectamente posible cuando se usa AJAX).

Código mejorado:

$(document).on('click', 'form input[type=submit]', function(){
    var name   = $(this).attr('name');
    if (typeof name == 'undefined') return;
    var value  = $(this).attr('value');
    var $form  = $(this).parents('form').first();
    var $input = $('<input type="hidden" class="temp-hidden" />').attr('name', name).attr('value', value);
    $form.find('input.temp-hidden').remove();
    $form.append($input);
});

Probé algunos de los ejemplos proporcionados, pero no funcionaron para nuestros propósitos.

Aquí hay un violín para mostrar: http://jsfiddle.net/7a8qhofo/1/

Me enfrenté a un problema similar, y así es como resolvimos el problema en nuestros formularios.

$(document).ready(function(){

    // Set a variable, we will fill later.
    var value = null;

    // On submit click, set the value
    $('input[type="submit"]').click(function(){
        value = $(this).val();
    });

    // On data-type submit click, set the value
    $('input[type="submit"][data-type]').click(function(){
        value = $(this).data('type');
    });

    // Use the set value in the submit function
    $('form').submit(function (event){
        event.preventDefault();
        alert(value);
        // do whatever you need to with the content
    });
});

(evento)

function submForm(form,event){
             var submitButton;

             if(typeof event.explicitOriginalTarget != 'undefined'){  //
                 submitButton = event.explicitOriginalTarget;
             }else if(typeof document.activeElement.value != 'undefined'){  // IE
                 submitButton = document.activeElement;
             };

             alert(submitButton.name+' = '+submitButton.value)
}


<form action="" method="post" onSubmit="submForm(this, event); return false;">

puede probar de esta manera con "event.originalEvent.x" y "event.originalEvent.y":

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <title>test</title>
</head>
<body>

    <form id="is_a_form">
        <input id="is_a_input_1" type="submit"><br />
        <input id="is_a_input_2" type="submit"><br />
        <input id="is_a_input_3" type="submit"><br />
        <input id="is_a_input_4" type="submit"><br />
        <input id="is_a_input_5" type="submit"><br />
    </form>

</body>
</html>
<script>
$(function(){

    $.fn.extend({
      inPosition: function(x, y) {

        return this.each(function() {

            try{
                var offset = $(this).offset();

                if ( (x >= offset.left) &&
                     (x <= (offset.left+$(this).width())) &&
                     (y >= offset.top) &&
                     (y <= (offset.top+$(this).height())) )
                {
                    $(this).css("background-color", "red");
                }
                else
                {
                        $(this).css("background-color", "#d4d0c8");
                }
                }
                catch(ex)
                {
                }

        });
      }
    }); 

    $("form").submit(function(ev) {

        $("input[type='submit']").inPosition(ev.originalEvent.x ,ev.originalEvent.y);
        return false;

    });

});
</script>

jQuery no parece proporcionar esos datos sobre el evento de envío. Parece que el método que propuso es su mejor opción.

Solo otra solución, ya que ninguna otra cumplía mis requisitos. La ventaja es que se detectan los clics y las pulsaciones de teclas (enter y espacio) .

// Detects the Events
var $form = $('form');
$form.on('click keypress', 'button[type="submit"]', function (ev) {

    // Get the key (enter, space or mouse) which was pressed.
    if (ev.which === 13 || ev.which === 32 || ev.type === 'click') {

        // Get the clicked button
        var caller = ev.currentTarget;

        // Input Validation
        if (!($form.valid())) {
            return;
        }

        // Do whatever you want, e.g. ajax...
        ev.preventDefault();
        $.ajax({
            // ...
        })
    }
}

Esto funcionó mejor para mí.

Con un controlador de eventos más específico y JQuery, su objeto de evento es el botón en el que se hace clic. También puede obtener el formulario de delegación de este evento si es necesario.

$('form').on('click', 'button', function (e) {
  e.preventDefault();
  var
    $button = $(e.target),
    $form = $(e.delegateTarget);
  var buttonValue = $button.val();
});

Este documento tiene todo lo que necesita para comenzar. JQuery Doc .

Escribo esta función que me ayuda

var PupulateFormData= function (elem) {
    var arr = {};
    $(elem).find("input[name],select[name],button[name]:focus,input[type='submit']:focus").each(function () {
        arr[$(this).attr("name")] = $(this).val();
    });
    return arr;

};

y luego usar

var data= PupulateFormData($("form"));