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

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 ]

0 голосов
/ 19 марта 2017

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

<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 происходит до отправки (?), Но я не уверен, что это всегда так.

0 голосов
/ 08 октября 2014

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


Во-первых, я создал быстрый CSS-класс, который можно встроить или в отдельный файл. 

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


Затем, по событию click кнопки в форме, добавьте класс 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.
        }
    });

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

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

Вы хотите использовать 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, и у вас будет ссылка на любой элемент, вызвавший процесс.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...