Как узнать, какая кнопка отправки вызвала событие onsubmit - PullRequest
Новая
       47

Как узнать, какая кнопка отправки вызвала событие onsubmit

9 голосов
/ 21 августа 2010

Если у вас в форме несколько кнопок отправки, есть ли способ узнать, какая из них запустила событие onsubmit, не добавляя код к самим кнопкам ??

Редактировать: Мне нужно выполнить проверку на стороне клиента, т. Е. С помощью JavaScript.

Ответы [ 4 ]

5 голосов
/ 21 августа 2010

Событие submit не вызывается кнопкой, а вызывается формой. Быстрый тест доказывает это: 

  <form id="myform">
     <input id="email" type="text" value="1st Email" />
     <input id="action1" type="submit" value="Action 1" />
     <input id="action2" type="submit" value="Action 2" />
  </form>

  <script type="text/javascript">

     document.getElementById("myform").onsubmit = function(evt)  {
        var event = evt || window.event;
        alert(event.target.id); // myform
        alert(event.explicitOriginalTarget.id); // action2 (if action2 was clicked)
                                                // but only works in firefox!
     }

  </script>

Несмотря на то, что в Firefox вы можете использовать свойство event.explicitOriginalTarget для события, чтобы получить входные данные (submit), по которым был выполнен щелчок, вызывая событие submit (если хочешь знать)

Итак, лучшие варианты для вас:

  • имеют другое значение для ваших кнопок отправки ИЛИ
  • Используйте их как обычные кнопки и нажимайте на них обработчики с помощью javascript.
1 голос
/ 06 мая 2016

Извините за разогрев этой очень старой темы. Здесь не было ответа на этот вопрос, но здесь уже были даны только подходы для практических обходных путей.

Но объект события действительно несет информацию о том, какой объект его инициировал. В обработчике b4submit (e) вы можете получить кнопку отправки следующим образом: 

function b4submit(e) {
    var but = e.originalEvent.explicitOriginalTarget;
    ...
}

И, кроме того, это объект HTML со всеми назначенными ему атрибутами, такими как имя, идентификатор, значение и т. Д.

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

1 голос
/ 21 августа 2010

Имеет ли прослушиватель событий на каждой кнопке значение для добавления кода? В противном случае нет способа увидеть, какая кнопка вызвала событие отправки, если только вы не хотите упасть и испачкаться, рассчитать положение мыши во время события и сравнить ее с позициями кнопок.

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

1 голос
/ 21 августа 2010

Есть несколько способов, о которых я могу подумать.

Вы можете использовать разные значения, и ваш ненавязчивый JavaScript может помочь с этим.

Одно обсуждение этого подхода (с использованием разных значений для каждой кнопки) здесь:

http://www.chami.com/tips/internet/042599I.html

Я склонен использовать разные атрибуты name для каждой кнопки.

Блог об этом здесь: http://www.codetoad.com/javascript/multiple.asp

Я не придерживаюсь ни одного из них, то, какой подход будет работать лучше всего, будет зависеть от различных факторов, таких как, обрабатываете ли вы кнопки отправки в javascript, или сервер получит форму, а затем должен выяснить, что хотел пользователь.

Лично я предпочитаю использовать подход ajax, теперь, когда я просто прикрепляю события к кнопкам после загрузки страницы, используя ненавязчивый javascript, а затем в зависимости от выбора пользователя обращаюсь к правильной функции, но это зависит о том, можете ли вы добавить ссылку на скрипт на html-страницу.

UPDATE:

Чтобы сделать это с помощью javascript, проще всего прикрепить событие по нажатию кнопки, а затем посмотреть на имя, чтобы решить, как его обработать.

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

...