jQuery: как узнать, какая кнопка была нажата при отправке формы? - PullRequest
Новая
       24

jQuery: как узнать, какая кнопка была нажата при отправке формы?

207 голосов
/ 19 апреля 2011

У меня есть событие .submit(), настроенное для отправки формы.У меня также есть несколько форм на странице, но только один здесь для этого примера.Я хотел бы знать, какая кнопка отправки была нажата без применения события .click() к каждому.

Вот настройка: 

<html>
<head>
  <title>jQuery research: forms</title>
  <script type='text/javascript' src='../jquery-1.5.2.min.js'></script>
  <script type='text/javascript' language='javascript'>
      $(document).ready(function(){
          $('form[name="testform"]').submit( function(event){ process_form_submission(event); } );
      });
      function process_form_submission( event ) {
          event.preventDefault();
          //var target = $(event.target);
          var me = event.currentTarget;
          var data = me.data.value;
          var which_button = '?';       // <-- this is what I want to know
          alert( 'data: ' + data + ', button: ' + which_button );
      }
  </script>
</head>
<body>
<h2>Here's my form:</h2>
<form action='nothing' method='post' name='testform'>
  <input type='hidden' name='data' value='blahdatayadda' />
  <input type='submit' name='name1' value='value1' />
  <input type='submit' name='name2' value='value2' />
</form>
</body>
</html>

Пример в реальном времени на jsfiddle

Помимо применения события .click () к каждой кнопке, есть ли способ определить, какая кнопка отправки была нажата?

Ответы [ 23 ]

4 голосов
/ 03 сентября 2014

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

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

}
3 голосов
/ 24 ноября 2015

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

$('form.form-js').submit(function(event){
    var frm = $(this);
    var btn = $(document.activeElement);
    if(
        btn.length &&
        frm.has(btn) &&
        btn.is('button[type="submit"], input[type="submit"], input[type="image"]') &&
        btn.is('[name]')
    ){
        frm.append('<input type="hidden" id="form-js-temp" name="' + btn.attr('name') + '" value="' + btn.val() + '">');
    }

    // Handle the form submit here

    $('#form-js-temp').remove();
});

Примечание: лично я добавляю класс form-js во все формы, отправляемые с помощью JavaScript.

3 голосов
/ 15 февраля 2014 
$("form input[type=submit]").click(function() {
    $("<input />")
        .attr('type', 'hidden')
        .attr('name', $(this).attr('name'))
        .attr('value', $(this).attr('value'))
    .appendTo(this)
});

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

3 голосов
/ 02 сентября 2015

Поскольку я не могу комментировать принятый ответ, я привожу здесь модифицированную версию, которая должна учитывать элементы, которые находятся за пределами формы (то есть: прикреплены к форме с использованием атрибута 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]');
})
3 голосов
/ 20 ноября 2014

Для меня лучшим решением было следующее: 

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

});
2 голосов
/ 04 марта 2014

Аналогичен ответу 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;
    ...
 }
2 голосов
/ 07 января 2015

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

// 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>
1 голос
/ 15 августа 2014

Мне помогло https://stackoverflow.com/a/17805011/1029257

Форма отправляется только после нажатия кнопки отправки. 

var theBtn = $(':focus');
if(theBtn.is(':submit'))
{
  // ....
  return true;
}

return false;
0 голосов
/ 12 октября 2017

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

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

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

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

Вот 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}
0 голосов
/ 17 августа 2017

Простой способ определить, какие нажаты, это проверить их 'id': 

$("button").click(function() {
  var id = $(this).attr('id');
  ... 
});
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...