Como posso obter o botão que causou o envio do evento de envio de formulário?

Estou tentando encontrar o valor do botão de envio que acionou o formulário para enviar

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

Eu poderia triggersr um $ (“input [type = submit]”). Click () evento para cada botão e definir algumas variables, mas isso parece menos elegante do que alguns como puxar o botão fora do formulário em enviar.

Eu aproveitei document.activeElement como esboçado nesta resposta: Como obter o elemento focado com 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 */ } }); 

Eu aproveito o fato de que o botão é sempre o elemento focalizado depois de clicar nele. Isso não funcionará se você fizer um blur() logo após o clique.

@ Doin viu outra desvantagem. Se um usuário enviar o formulário por meio de um campo de texto, o document.activeElement não será definido. Você precisaria tomar cuidado com isso, manipulando events de keypress na input[type="text"] e similares.

Atualização de 2017-01: Para minha biblioteca Hyperform , optei por não usar activeElement mas para capturar todos os events que levam ao envio de formulários. O código para isso está no Github.

Se acontecer de você usar o Hyperform, é assim que você acessaria o botão que acionou o envio:

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

Eu implementei isso e suponho que vai funcionar.

 $(document).ready(function() { $("form").submit(function() { var val = $("input[type=submit][clicked=true]").val() // DO WORK }); 

e este é o evento de botão de envio que configura

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

Obrigado pelas respostas, mas isso não é muito deselegante …

Eu criei um formulário de teste e usei o Firebug para encontrar o valor;

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

Infelizmente, apenas o Firefox suporta este evento.

Aqui está uma abordagem que parece mais limpa para os meus propósitos.

Primeiro, para todas e quaisquer formas:

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

Quando esse evento de clique é triggersdo para um formulário, ele simplesmente registra o destino de origem (disponível no object de evento) a ser acessado posteriormente. Este é um curso bem amplo, pois ele será acionado para qualquer clique em qualquer lugar do formulário. Comentários de otimização são bem-vindos, mas suspeito que isso nunca causará problemas visíveis.

Então, em $ (‘form’). Submit (), você pode perguntar o que foi clicado pela última vez, com algo como

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

De acordo com este link , o object Event contém um campo Event.target , que:

Retorna uma string representando o object que iniciou o evento.

Acabei de criar uma página testando qual é esse valor e parece que essa representação é para o formulário em si, não para o botão clicado. Em outras palavras, o Javascript não fornece o recurso para determinar o botão clicado.

No que diz respeito à solução de Dave Anderson, pode ser uma boa ideia testar isso em vários navegadores antes de usá-lo. É possível que funcione bem, mas não posso dizer de qualquer maneira.

Uma abordagem limpa é usar o evento click em cada botão de formulário. A seguir, um formulário em html com os botões salvar, cancelar e excluir:

 

A seguir está o jquery. Eu envio a ‘ação’ apropriada para a mesma function de servidor, dependendo de qual botão foi clicado (‘salvar’ ou ‘excluir’). Se ‘cancelar’, for clicado, basta recarregar a 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; }); 

Eu procurei e encontrei várias maneiras de obter o name botão de envio + value enviado para o servidor usando jQuery + AJAX. Eu não gostei muito deles …

Um dos melhores foi a solução de caçador apresentada aqui!

Mas eu mesmo escrevi outro.

Eu quero compartilhar, porque é bom, e, como eu precisava, funciona também com formulários carregados via ajax (depois de document.ready):

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

Simples! Quando o botão de envio é clicado, um campo oculto é adicionado ao formulário, usando o mesmo name e value do botão de envio.

EDIT: A versão abaixo é mais fácil de ler. Além disso, ele cuida da remoção de campos ocultos anexados anteriormente (no caso de enviar o mesmo formulário duas vezes, o que é perfeitamente possível ao usar o AJAX).

Código aprimorado:

 $(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 = $('').attr('name', name).attr('value', value); $form.find('input.temp-hidden').remove(); $form.append($input); }); 

Eu tentei alguns dos exemplos fornecidos, mas eles não funcionaram para nossos propósitos.

Aqui está um violino para mostrar: http://jsfiddle.net/7a8qhofo/1/

Fui confrontado com um problema semelhante e foi assim que resolvemos o problema em nossos formulários.

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

você pode tentar desta forma com “event.originalEvent.x” e “event.originalEvent.y”:

 < !DOCTYPE html>    test   





(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) } 

O jQuery não parece fornecer esses dados no evento submit. Parece que o método que você propôs é sua melhor aposta.

Apenas mais uma solução, uma vez que nenhuma outra satisfez meus requisitos. A vantagem é que o clique e a tecla (enter e espaço) são detectados.

 // 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, eg ajax... ev.preventDefault(); $.ajax({ // ... }) } } 

Isso funcionou melhor para mim.

Com um manipulador de events mais específico e JQuery, seu object de evento é o botão clicado. Você também pode obter o formulário de delegação deste evento, se necessário.

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

Este Doc tem tudo que você precisa para começar. JQuery Doc .