jQuery submit, ¿cómo puedo saber qué botón de enviar se presionó?

Question

Estoy usando el complemento ajaxSubmit para enviar formularios Ajax, pero por alguna razón este complemento no envía nombres/valores de input[type=image]. Así que ahora estoy capturando el evento enviar antes de que ajaxSubmit maneje el formulario y necesito saber si es posible averiguar qué botón se presionó.

Answer 1

$("input .button-example").click(function(){ 
//do something with $(this) var 
}); 

PD: ¿tiene jQuery controlando los $ var? De lo contrario, usted tiene que hacer esto:

jQuery.noConflict(); 
jQuery(document).ready(function(){ 
    jQuery("input .button-example").click(function(){ 
    //do something with jQuery(this) var 
     alert(jQuery(this)); 
    }); 
}); 

si quieres probar el control en el evento (forma submit)

$(document).ready(function(){ 
    $("#formid").submit(function() { 
      alert('Handler for .submit() called.'); 
      return false; 
    }); 
}); 

dime algo si funciona;)

Answer 2

Esto cogerá aplicable a la entrada inició el elemento de confirmación:

$(document).ready(function() { 
    var target = null; 
    $('#form :input').focus(function() { 
     target = this; 
     alert(target); 
    }); 
    $('#form').submit(function() { 
     alert(target); 
    }); 
}); 

Answer 3

$(document).ready(function() { 
    var clickedVar = null; 
    $('#form :submit').focus(function() { 
     clickedVar = $(this).attr("name"); 
     alert(clickedVar); 
    }); 
}); 

Answer 4

Lo que sigue es lo que creo que sería un ejemplo más completo de cómo lograr lo que pediste. Debe reemplazar el "# su formulario" con su forma de identificación y reemplazar "Button One" & "Button Two" con los valores en los botones de formulario.

$(document).ready(function() { 
    var target = null; 
    $('#your-form-id :input').focus(function() { 
    target = $(this).val(); 
    }); 
    $('#your-form-id').submit(function() { 

    if (target == 'Button One') { 
     alert (target); 
    } 
    else if (target == 'Button Two') { 
     alert (target); 
    } 
    }); 
}); 

Answer 5

Así es como lo resolví. Me inspiraron algunas de las respuestas publicadas anteriormente, pero necesitaba un enfoque que funcionara para todos mis formularios, ya que los cargué dinámicamente.

me di cuenta de que el ajaxSubmit tenía una opción data el que se describe por el plugin hace lo siguiente:

Un objeto que contiene datos adicionales que deben presentarse junto con el formulario .

Esto es exactamente lo que necesitamos.

Así que une el controlador de clic en mis botones de envío y se guarda el elemento usando jQuery (prefiero este método de añadir un atributo falso):

$('[type="submit"]').live('click', function(e){ 
     jQuery.data($(this).parents('form')[0], 'submitTrigger', $(this).attr('name')); 
}); 

Y luego, en mi llamada ajaxSubmit he construido el objeto de datos y lo envió como esto:

function dialogFormSubmit(form) { 
    var data = {} 
    data[jQuery.data(form, 'submitTrigger')] = true; 
    $(form).ajaxSubmit({ 
     data: data 
    }); 
    return false; 
} 

I Built Object los datos de esa manera porque quería que se comporte de la misma manera como si hubiera presentado con la vainilla HTML/PHP (nombre de la entrada es la clave en la matriz $ _POST). Supongo que si quisiera mantenerme fiel a su comportamiento real, habría agregado el valor o el innerHTML del botón de enviar, pero normalmente solo compruebo si está configurado, por lo que no era necesario :).

Answer 6

Esto es lo que estoy utilizando (ligera variación de los otros, usando mouseup y eventos keyup en vez de enfoque):

var submitButton = undefined; 
$('#your-form-id').find(':submit').live('mouseup keyup',function(){ 
    submitButton = $(this); 
}); 
$('#your-form-id').submit(function() { 
    console.log(submitButton.attr('name')); 
}); 

Answer 7

Me pareció muy útil. Cubre el caso de hacer clic, y también enviar con índice de pestaña y presionar espacio o ingresar.Captura la última entrada antes de que se realice un envío, y ese es el botón que se envió, por lo que puede tener varios botones y verificar cada uno como un objetivo para realizar algo único.

$('#form input').live('focusin focusout mouseup', function() { 
    // Add a data attribute to the form and save input as last selected 
    $('#form').data('lastSelected', $(this)); 
}); 
$('#form').submit(function() { 
    var last = $(this).data('lastSelected').get(0); 
    var target = $('#button').get(0); 
    console.log(last); 
    console.log(target); 
    // Verify if last selected was our target button 
    if (last == target) { 
     console.log('bingo'); 
     return false; 
    } 
}); 

Answer 8

Hola la respuesta no me convenció tanto aquí para traer una alternativa. Lo que haré es verificar mediante JS qué botón se ha pulsado.

<head> 
<script> 
$('body').click(function(event) { 
    var log = $('#log'); 
    if($(event.target).is('#btn1')) { 
     log.html(event.target.id + ' was clicked.'); 
     return false; 
    }else{ 
     if($(event.target).is('#btn2')) { 
      log.html(event.target.id + ' was clicked.'); 
      return false; 
       } 
     } 
}); 
</script> 
</head> 
<body> 
    <form id="formulario" method="post"> 
     <div id="log"></div> 
     <input type="submit" id="btn1" value="Btn 01"> 
     <input type="submit" id="btn2" value="Btn 02"> 
    </form> 
</body> 

Utilice esta página para hacer la prueba Test

Saludos