Javascript - обнаружение нажатия кнопки формы - PullRequest
Новая
       0

Javascript - обнаружение нажатия кнопки формы

0 голосов
/ 29 августа 2018

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

HTML 

<form action="/pst" method="POST">
    Form
<input type="url" name="form_input">
<input type="submit" value="submit" />

JAVASCRIPT 

<script>
                var submit = document.getElementsByTagName('input')[0];
                submit.onclick = function() {
                    alert("Button pressed!");
                }
</script>

Это не работает ... Также я должен сообщить, что скрипт находится внутри <body>.

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Это будет работать, если вы ссылаетесь на правильный элемент. Вы хотите индекс 1, а не 0. 

var submit = document.getElementsByTagName('input')[1];
submit.onclick = function() {
  alert("Button pressed!");
}
<form action="/pst" method="POST">
    Form
  <input type="url" name="form_input">
  <input type="submit" value="submit">
</form>

Поскольку вы только учитесь, уместно избавиться от некоторых вредных привычек, прежде чем они освоятся. .getElementsByTagName(), безусловно, работает, но возвращает то, что называется "живым" списком узлов, что означает, что каждый раз, когда вы используете переменную, ссылающуюся на список, весь документ должен быть отсканирован снова, чтобы найти самый актуальный набор соответствующих элементов. Как таковой, он должен использоваться только в ситуациях, когда элементы динамически добавляются / удаляются из документа. Кроме того, поскольку вас интересует только один элемент, сканирование всего документа на наличие набора элементов, просто отбрасывание всех, кроме одной из этих ссылок, расточительно.

Вместо этого используйте более подходящие API, такие как .querySelector() и .getElementById().

Далее, вместо настройки обработчика событий с помощью свойства .onclick, используйте более современный и надежный .addEventListener() API, который позволяет регистрировать несколько обработчиков событий для одного события.

Наконец, имейте в виду, что нажатие кнопки submit фактически вызывает два события: событие click самой кнопки и событие submit элемента form, к которому привязана кнопка отправки. Обычно мы хотим подключиться к событию submit формы.

Собираем все это вместе: 

// Get a reference to the form
var form = document.querySelector("form");

// Set up a submit event handler
form.addEventListener("submit", function() {
  alert("Form Submitted!");
});

// Get a reference to the textbox
var textbox = document.querySelector("input[type='url']");

// Set up a input event handler (fires every time you type in the box)
textbox.addEventListener("input", function() {
  console.log("edit - new value is:" + this.value);
});
<form action="/pst" method="POST">
    Form
  <input type="url" name="form_input">
  <input type="submit" value="submit">
</form>
0 голосов
/ 29 августа 2018 
var submit = document.getElementsByTagName('input')[0];

Это выберет первый ввод типа = url, а не отправку. Это связано с тем, что ввод URL сначала находится в DOM, перед вводом ввода.

Нацельтесь на элемент более точно. Дайте ему идентификатор или используйте запрос типа 

document.querySelector('input[type=submit]');

Кроме того, вам, вероятно, следует прослушивать событие отправки формы, а не событие нажатия кнопки. 

document.querySelector('form').addEventListener('submit', ...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...