Добавьте два слушателя событий к двум кнопкам отправки в одной форме - PullRequest
Новая
       150

Добавьте два слушателя событий к двум кнопкам отправки в одной форме

0 голосов
/ 14 июля 2020

У меня есть одна форма с двумя кнопками отправки, и для каждой из них я хочу добавить отдельный прослушиватель событий при нажатии и выполнять разные действия для каждой из них. Но второй не работает, функция не срабатывает. Я новичок в JS, поэтому любая помощь будет приветствоваться. Заранее спасибо. Мой код: HTML

<form id="searching" action="javascript:void(0);">
              <input class="form-class w-50" type="text" id="search" placeholder="Input your search keyword" name="search">
              <br><br>
              <input type="submit" class="btn btn-warning" id="submit" value="Weather" name="weather">
              <input type="submit" class="btn btn-warning" id="submit2" value="Forecast!" name="forecast">
</form>

JS

const submit = document.getElementById('submit');
submit.addEventListener('click', event.getSearch.bind(this,'search'));

const submit2 = document.getElementById('submit2');
submit2.addEventListener('click', event.getForecast.bind(this));

1 Ответ

1 голос
/ 14 июля 2020

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

(Поскольку вы вызывая пользовательские функции вместо фактической отправки формы, вы также можете подумать об изменении ввода submit на обычные кнопки и, возможно, даже полностью опуская элемент form.) 

const
  submit = document.getElementById('submit'),
  submit2 = document.getElementById('submit2');
submit.addEventListener('click', getSearch);
submit2.addEventListener('click', getForecast);

function getSearch(){ console.log("searching..."); }
function getForecast(){ console.log("forecasting..."); }
<form id="searching" action="javascript:void(0);">
  <label for="search">Search </label><input id="search"/><br><br>
  <input type="submit" id="submit" value="Weather"/>
  <input type="submit" id="submit2" value="Forecast!"/>
</form>
...