Как я могу получить кнопку, которая вызвала отправку из формы отправки события?

Question

Я пытаюсь найти значение кнопки отправки, которая вызвала форму для отправки

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

});

Я мог бы вызвать событие $ ("input [type = submit]"). Click () для каждой кнопки и установить некоторую переменную, но это выглядит менее элегантно, чем то, как выдергивание кнопки из формы при отправке .

Answer 1

Я использовал document.activeElement, как показано в этом ответе: Как получить сфокусированный элемент с помощью 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 */
    }
});

Я пользуюсь тем, что кнопка всегда является сфокусированным элементом после нажатия на нее. Это будет не работать, если вы сделаете blur() сразу после нажатия.

@ Дуин заметил еще один недостаток. Если пользователь отправляет форму через enter в текстовом поле, document.activeElement не устанавливается. Вам нужно следить за этим самостоятельно, обрабатывая keypress события в input[type="text"] и подобные.

Обновление 2017-01: Для моей библиотеки Гиперформа Я решил не использовать activeElement, а перехватывать все события, которые приводят к отправке формы. Код для этого находится на Github.

Если вы используете Hyperform, вы получите доступ к кнопке, которая вызвала отправку:

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

Answer 2

Я реализовал это, и я предполагаю, что это будет делать.

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

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

    // DO WORK

});

и это событие кнопки отправки, которое устанавливает его

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

Спасибо за ответы, но это не ужасно не элегантно ...

Answer 3

Я создал тестовую форму и с помощью Firebug нашел способ получить значение;

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

К сожалению, только Firefox поддерживает это событие.

Answer 4

Вот подход, который кажется более чистым для моих целей.

Во-первых, для любой и всех форм:

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

Когда это событие щелчка запускается для формы, оно просто записываетисходная цель (доступная в объекте события) для доступа позже.Это довольно широкий штрих, так как он будет срабатывать при любом щелчке в любом месте формы.Комментарии по оптимизации приветствуются, но я подозреваю, что они никогда не вызовут заметных проблем.

Затем, в $ ('form'). Submit (), вы можете узнать, что было нажато в последний раз, например,

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

Answer 5

Один чистый подход заключается в использовании события click на каждой кнопке формы. Ниже приведена HTML-форма с кнопками сохранения, отмены и удаления:

<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> 

Ниже приводится JQuery. Я отправляю соответствующее «действие» на ту же функцию сервера в зависимости от того, какая кнопка была нажата («сохранить» или «удалить»). Если нажать кнопку «Отмена», я просто перезагружаю страницу.

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

Answer 6

Согласно этой ссылке , объект Event содержит поле Event.target, которое:

Возвращает строку, представляющую объект, инициировавший событие.

Я только что создал страницу, проверяющую, что это за значение, и кажется, что это представление для самой формы, а не для нажатой кнопки.Другими словами, Javascript не предоставляет средства для определения нажатой кнопки.

Что касается решения Дейва Андерсона , возможно, было бы неплохо проверить это в нескольких браузерах перед использованиемЭто.Вполне возможно, что это могло бы работать нормально, но я не могу сказать в любом случае.

Answer 7

Я искал и нашел несколько способов получить кнопку отправки name + value, отправленную на сервер с помощью jQuery + AJAX. Мне они не очень нравились ...

Одним из лучших было решение охотника, представленное здесь!

Но я сам написал еще один.

Я хочу поделиться, потому что это хорошо, и, как мне было нужно, оно работает также с формами, загруженными через ajax (после 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'));
});

Simple! При нажатии кнопки отправки в форму добавляется скрытое поле, используя те же name и value кнопки отправки.

РЕДАКТИРОВАТЬ: Версия ниже легче читать. Кроме того, он заботится об удалении ранее добавленных скрытых полей (в случае отправки одной и той же формы дважды, что вполне возможно при использовании AJAX).

Улучшенный код:

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

Answer 8

(событие)

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;">

Answer 9

Я попробовал некоторые из приведенных примеров, но они не работали для наших целей.

Вот скрипка, чтобы показать: http://jsfiddle.net/7a8qhofo/1/

Я столкнулся с подобной проблемой, и именно так мы решили проблему в наших формах.

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

Answer 10

вы можете попробовать этот способ с "event.originalEvent.x" и "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>