JS. Как отправить input по нажатию Enter?

Question

[TechNOIR]

Добрый день.

Не срабатывает отправка из input по enter =(

<input id="textbox" name="sendtext" class="controls-elements" placeholder="Напишите сообщение и нажмите Enter" type="text"></input>
<button id="send" onclick="buttonotprav()" class="controls-elements" type="submit">Отправить</button>

$('#sendtext').on('keydown', function(e) {
  if (e.which === 13) {
    buttonOtprav()
  }
})

Подскажите пожалуйста что не правильно сделал? Спасибо заранее!

Comments

[Ярослав Иванов]

Айдишники разные и вызов функции. Зачем вызов функции делать инлайново ? Зачем вообще айди использовать ?

Answer 1

[Николай Шабалин]

Оберните формой и повесьте слушателя submit

<form method="post" action="send/to/server">
  <input id="textbox" name="sendtext" class="controls-elements" placeholder="Напишите сообщение и нажмите Enter" type="text"></input>
  <button id="send" onclick="buttonotprav()" class="controls-elements" type="submit">Отправить</button>
</form>

$('form').on('submit', event => {
  event.preventDeailt();
  ... // тут можно получить ответ от сервера, если ajax'ом сделать
})

Comments

[TechNOIR]

Николай Шабалин Спасибо!!! Но трабла теперь в JS походу... дело в том что это чат бот (cht.ignn.ru) и теперь и отправке по ENTER он отправляет сообщение и обновляет страницу чата..

[leni_m]

TechNOIR,

$('form').on('submit', event => {
   ...
   return false; // остановка дефолтной отправки формы, и выполнится только кодвыше
})

Answer 2

[kulaeff]

Во-первых, у кнопки id="send", а подписываетесь вы почему-то на событие keydown элемента sendtext. Такого элемента не существует, потому и не срабатывает обработчик. Во-вторых, вы и инлайном вешаете обработчик и через селектор. Так не нужно делать. Как минимум потому, что это усложняет поддержку кода. Надо делать так:

<form method="post" action="send/to/server">
  <input id="textbox" name="sendtext" class="controls-elements" placeholder="Напишите сообщение и нажмите Enter" type="text"></input>
  <button id="send" class="controls-elements" type="submit">Отправить</button>
</form>

function buttonOtprav() {
  //...
}

$('#send').on('click', buttonOtprav)

$('#send').on('keydown', function(e) {
  if (e.which === 13) {
    buttonOtprav()
  }
})

Однако, если это возможно, воспользуйтесь лучше ответом Николай Шабалин.

PS: Не называйте функции и переменные транслитом, типа buttonOtprav, это как-то, имхо, не солидно. Назовите buttonSend.