Определите, какой элемент отправил форму изнутри отправки - PullRequest
Новая
       5

Определите, какой элемент отправил форму изнутри отправки

9 голосов
/ 12 февраля 2009

Есть ли способ определить, какой элемент отправил форму из обработчика onsubmit? Попытка написать общий обработчик, который знает, какой элемент был нажат. Например, с помощью этой формы: 

<form onsubmit="onSubmitHandler">
    <input type="submit" name="submit1" />
    <input type="submit" name="submit2" />
</form>

Как я могу определить в onSubmitHandler, какая кнопка отправки была нажата? Я пробовал event.target/event.srcElement, но это дает форму, а не кнопку фактической отправки.

Обновление: я пишу здесь общий элемент управления, поэтому он не знает, что находится на форме. Решение должно работать без знания и изменения HTML-формы. Мой запасной вариант - пройтись по DOM, чтобы найти все кнопки, которые могут вызвать отправку, но я бы хотел этого избежать.

Ответы [ 5 ]

3 голосов
/ 12 февраля 2009

Альтернативным решением было бы переместить триггер события из события отправки формы в событие onclick элемента submit, как таковое: 

<form name='form1'>  
    <input type="submit" name="submit1" onclick="onSubmitHandler"/>
    <input type="submit" name="submit2" onclick="onSubmitHandler"/>
</form>

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

1 голос
/ 12 февраля 2009

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

Заставьте функцию submit принять дополнительный аргумент, представляющий элемент, который его отправил, и кнопка будет иметь щелчок, который отправляет this в качестве параметра: 

<input type="button" onclick="submitHandler(this)">
0 голосов
/ 11 мая 2013

Пузырь событий клика, так что вы можете просто добавить прослушиватель «onclick» к самой форме, который проверяет, является ли целевой объект клика кнопкой отправки; если это так, сохраните ссылку на нее где-нибудь, связанную с формой, к которой вы можете получить доступ из обработчика onsubmit.

Если вы также хотите правильно обрабатывать отправленные формы «Enter», прослушайте событие «onkeypress» или «onkeydown» формы, проверьте «Enter» и очистите информацию кнопки подтверждения, если цель события НЕ СЛЕДУЕТ кнопка отправки.

0 голосов
/ 12 февраля 2009

Это решение работает в Firefox. Я не проверял это в других совместимых браузерах или IE.
Я не очень надеюсь на IE, вам придется изучить его и опубликовать результаты. 

<form id="myForm">
    <input type="submit">
    <input type="submit">
</form>

_ 

document.getElementById('myForm').addEventListener( 'submit', function( e ){
    e.preventDefault();
    e.explicitOriginalTarget.style.background = 'red';
}, false );
0 голосов
/ 12 февраля 2009

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

... и добавление к ним прослушивателей щелчков, чтобы сохранить кнопку «последний щелчок», которая затем читается отправителем, верно?

Я не могу думать ни о каком другом, извини.

...