Не удалось получить значение нажатой кнопки, когда два элемента кнопки имеют одно и то же имя [дубликат]

Основываясь на том, что Стэн и Янн-ч сделали, но этот по умолчанию используется для первой кнопки. Красота этого общего подхода заключается в том, что он выбирает как щелчок, так и клавишу ввода (даже если фокус не был на кнопке. Если вам нужно разрешить ввод в форму, просто ответьте на это, когда кнопка сфокусирована ( то есть ответ Стэна). В моем случае я хотел разрешить ввод, чтобы отправить форму, даже если текущий фокус пользователя был в текстовом поле.

Я также использовал атрибут 'name', а не 'id ', но это тот же подход.

var pressedButtonName =
     typeof $(":input[type=submit]:focus")[0] === "undefined" ?
     $(":input[type=submit]:first")[0].name :
     $(":input[type=submit]:focus")[0].name;

Простой способ определить, какая & lt; кнопка & gt; или & lt; input type = "button" ... & gt; нажатие, это проверка их «id»:

$("button").click(function() {
  var id = $(this).attr('id');
  ... 
});

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

добавить скрытое поле

Вы хотите использовать window.event.srcElement.id следующим образом:

function clickTheButton() {

var Sender = window.event.srcElement;
alert("the item clicked was " + Sender.id)

}

для кнопки, которая выглядит так:

<input type="button" id="myButton" onclick="clickTheButton();" value="Click Me"/>

вы получите предупреждение, что гласит: «элемент был нажат myButton.

В вашем улучшенном примере вы можете добавить window.event.srcElement в process_form_submission, и у вас будет ссылка на любой элемент, вызванный процессом.

Вы можете создать тип ввода = «скрытый» как держатель для информации о кнопке.

<input type="hidden" name="button" id="button">
<input type="submit" onClick="document.form_name.button.value = 1;" value="Do something" name="do_something">

В этом случае форма передает значение «1» (идентификатор вашей кнопки) при отправке. Это работает, если onClick возникает перед submit (?), Что я не уверен, что он всегда прав.

Вот пример, который использует this.form, чтобы получить правильную форму, в которую отправляется, и поля данных для хранения последнего щелкнутого / сфокусированного элемента. Я также завернул код отправки в таймаут, чтобы убедиться, что события щелчка произойдут до того, как они будут выполнены (некоторые пользователи сообщили в комментариях, что в Chrome иногда происходит событие щелчка после отправки).

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

Вы можете добавить кнопки type = "submit" для элементов, которые сохраняются при нажатии.

В демо я установил красную рамку, чтобы отобразить выбранный элемент и предупреждение, которое показывает имя и значение / метку.

Здесь FIDDLE

И вот код (тот же):

Javascript:

$("form").submit(function(e) {
  e.preventDefault();
  // Use this for rare/buggy cases when click event is sent after submit
  setTimeout(function() {

    var $this=$(this);
    var lastFocus = $this.data("lastFocus");
    var $defaultSubmit=null;

    if(lastFocus) $defaultSubmit=$(lastFocus);

    if(!$defaultSubmit || !$defaultSubmit.is("input[type=submit]")) {
      // If for some reason we don't have a submit, find one (the first)
      $defaultSubmit=$(this).find("input[type=submit]").first();
    }

    if($defaultSubmit) {
      var submitName=$defaultSubmit.attr("name");
      var submitLabel=$defaultSubmit.val();

       // Just a demo, set hilite and alert
      doSomethingWith($defaultSubmit);
      setTimeout(function() {alert("Submitted "+submitName+": '"+submitLabel+"'")},1000);
    } else {
      // There were no submit in the form
    }

  }.bind(this),0);

});

$("form input").focus(function() {
  $(this.form).data("lastFocus", this);
});
$("form input").click(function() {
  $(this.form).data("lastFocus", this);
});

// Just a demo, setting hilite
function doSomethingWith($aSelectedEl) {
  $aSelectedEl.css({"border":"4px solid red"});
  setTimeout(function() { $aSelectedEl.removeAttr("style"); },1000);
}

DUMMY HTML:

<form>
<input type="text" name="testtextortexttest" value="Whatever you write, sir."/>
<input type="text" name="moretesttextormoretexttest" value="Whatever you write, again, sir."/>

<input type="submit" name="test1" value="Action 1"/>
<input type="submit" name="test2" value="Action 2"/>
<input type="submit" name="test3" value="Action 3"/>
<input type="submit" name="test4" value="Action 4"/>
<input type="submit" name="test5" value="Action 5"/>
</form>

DUMB CSS:

input {display:block}

Я также сделал решение, и он работает довольно хорошо: он использует jQuery и CSS

. Сначала я сделал быстрый CSS-класс, это может быть встроено или в отдельный файл.

<style type='text/css'>
    .Clicked {
        /*No Attributes*/
    }
</style>

Далее. В событии нажатия кнопки в форме добавьте класс CSS к кнопке. Если кнопка уже имеет класс CSS, удалите ее. (Мы не хотим использовать два класса CSS [на всякий случай]).

    // Adds a CSS Class to the Button That Has Been Clicked.
    $("form :input[type='submit']").click(function () 
    {
        if ($(this).hasClass("Clicked"))
        {
            $(this).removeClass("Clicked");
        }
        $(this).addClass("Clicked");
    });

Теперь протестируйте кнопку, чтобы увидеть, что у нее есть класс CSS, если у тестируемой кнопки нет CSS, то другая кнопка будет.

    // On Form Submit
    $("form").submit(function ()
    {
        // Test Which Button Has the Class
        if ($("input[name='name1']").hasClass("Clicked"))
        {
            // Button 'name1' has been clicked.
        }
        else
        {
           // Button 'name2' has been clicked.
        }
    });

Надеюсь, это поможет! Ура!

Если вы не подразумеваете, что вы не добавляете событие .click, вы не хотите иметь отдельные обработчики для этих событий, вы можете обрабатывать все клики (подчиняется) одной функцией:

$(document).ready(function(){
  $('input[type="submit"]').click( function(event){ process_form_submission(event); } );
});

function process_form_submission( event ) {
  event.preventDefault();
  //var target = $(event.target);
  var input = $(event.currentTarget);
  var which_button = event.currentTarget.value;
  var data = input.parents("form")[0].data.value;
//  var which_button = '?';       // <-- this is what I want to know
  alert( 'data: ' + data + ', button: ' + which_button );
}

Для меня лучшие решения были такими:

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

   // Get the button that was clicked       
   var submit = $(this.id).context.activeElement;

   // You can get its name like this
   alert(submit.name)

   // You can get its attributes like this too
   alert($(submit).attr('class'))

});

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

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

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

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

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

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

Я обнаружил, что это сработало.

$(document).ready(function() {
    $( "form" ).submit(function () {
        // Get the submit button element
        var btn = $(this).find("input[type=submit]:focus" );
    });
}

Ничего себе, некоторые решения могут усложняться! Если вы не против использования простого глобального, просто воспользуйтесь тем, что сначала запускается событие нажатия кнопки ввода. Можно было бы дополнительно фильтровать селектор $ ('input') для одной из многих форм, используя $ ('# myForm input').

    $(document).ready(function(){
      var clkBtn = "";
      $('input[type="submit"]').click(function(evt) {
        clkBtn = evt.target.id;
      });

      $("#myForm").submit(function(evt) {
        var btnID = clkBtn;
        alert("form submitted; button id=" + btnID);
      });
    });

Когда форма отправлена:

• document.activeElement предоставит вам кнопку отправки, которая была нажата.
• document.activeElement.getAttribute('value') предоставит вам эту кнопку.

Это работало для меня

$('#Form').submit(function(){
var btn= $(this).find("input[type=submit]:focus").val();
alert('you have clicked '+ btn);

}

Это работает для меня:

$("form").submit(function() {
   // Print the value of the button that was clicked
   console.log($(document.activeElement).val());
}

Я нашел лучшее решение

$(document.activeElement).attr('id')

Это не только работает на входах, но также работает с тегами кнопок. Также он получает идентификатор кнопки.

Поскольку я не могу прокомментировать принятый ответ, я привожу здесь модифицированную версию, которая должна учитывать элементы, которые вне формы (т. е. прикреплены к форме с помощью атрибута form). Это для современного браузера: http://caniuse.com/#feat=form-attribute . closest('form') используется как резерв для неподдерживаемого атрибута form

$(document).on('click', '[type=submit]', function() {
    var form = $(this).prop('form') || $(this).closest('form')[0];
    $(form.elements).filter('[type=submit]').removeAttr('clicked')
    $(this).attr('clicked', true);
});

$('form').on('submit', function() {
    var submitter = $(this.elements).filter('[clicked]');
})

Это решение, используемое мной и работающее очень хорошо:

// prevent enter key on some elements to prevent to submit the form
function stopRKey(evt) {
  evt = (evt) ? evt : ((event) ? event : null);
  var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
  var alloved_enter_on_type = ['textarea'];
  if ((evt.keyCode == 13) && ((node.id == "") || ($.inArray(node.type, alloved_enter_on_type) < 0))) {
    return false;
  }
}

$(document).ready(function() {
  document.onkeypress = stopRKey;
  // catch the id of submit button and store-it to the form
  $("form").each(function() {
    var that = $(this);

    // define context and reference
    /* for each of the submit-inputs - in each of the forms on
			 the page - assign click and keypress event */
    $("input:submit,button", that).bind("click keypress", function(e) {
      // store the id of the submit-input on it's enclosing form
      that.data("callerid", this.id);
    });
  });

  $("#form1").submit(function(e) {
    var origin_id = $(e.target).data("callerid");
    alert(origin_id);
    e.preventDefault();

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="form1" name="form1" action="" method="post">
  <input type="text" name="text1" />
  <input type="submit" id="button1" value="Submit1" name="button1" />
  <button type="submit" id="button2" name="button2">
    Submit2
  </button>
  <input type="submit" id="button3" value="Submit3" name="button3" />
</form>

Еще одно возможное решение заключается в добавлении скрытого поля в вашу форму:

<input type="hidden" id="btaction"/>

Затем в функции готовности добавьте функции для записи того, какая клавиша была нажата:

$('form#myForm #btnSubmit').click(function() {
    $('form#myForm #btaction').val(0);
});

$('form#myForm #btnSubmitAndSend').click(function() {
    $('form#myForm #btaction').val(1);
});

$('form#myForm #btnDelete').click(function() {
    $('form#myForm #btaction').val(2);
});

Теперь в обработчике формы читаем скрытую переменную и решаем на ее основе:

var act = $('form#myForm #btaction').val();

Как и у Stan, но:

• , если у вас несколько кнопок, вы должны получить только первую кнопку => [0]
• , если форма могут быть отправлены с ключом ввода, вам нужно управлять значением по умолчанию => myDefaultButtonId

$(document).on('submit', function(event) {
    event.preventDefault();
    var pressedButtonId = 
         typeof $(":input[type=submit]:focus")[0] === "undefined" ? 
         "myDefaultButtonId" :
         $(":input[type=submit]:focus")[0].id;
    ...
 }