За последние 24 часа нас посетил 21131 программист и 1108 роботов. Сейчас ищут 457 программистов ...

Не работает отправка формы по Enter

Тема в разделе "JavaScript и AJAX", создана пользователем AndreyN, 16 мар 2020.

  1. AndreyN

    AndreyN Новичок

    С нами с:
    16 мар 2020
    Сообщения:
    2
    Симпатии:
    0
    Уважаемые коллеги, прошу помощи!
    JS только начинаю плотно изучать.
    Возможно через месяц мне данная проблема самому покажется смешной, но пока я уперся в стену!(((

    Есть простая форма с текстовой областью и двумя кнопками "Проверить" и "Очистить".
    По первой отправляются данные на обработчик. По второй очищаются результаты поиска (сессии очищаются).

    <form action="search_code.php" method="post" id="f1">
    <p><textarea rows="12" cols="50" name="search_text" id="st"></textarea></p>
    <input type="submit" name="submit1" value="Проверить"/>
    <input type="submit" name="submit2" value="Очистить"/>
    </form>

    Задача простая.
    Сделать отправку формы при нажатии кнопки Enter на текстовой области.

    Наваял такой скрипт:

    <script type="text/javascript">
    document.onload = function () {
    document.getElementById('st').onkeypress = function(key) {
    if(key.keyCode == 13) {
    document.getElementById('f1').submit();
    }
    }
    }
    </script>

    Но он упорно отказывается работать.

    Попробовал тоже самое с использование JQuery:

    $(document).ready(function () {

    $('#st').on('keypress', function(e){

    if(e.keyCode ==13){

    $('#f1').submit();

    }

    });

    });

    Здесь результат чуть лучше. По крайней мере нажатие кнопки отлавливается,
    но форма все рано не отправляется.

    Подскажите, плиз, где я ошибся? Что я не так делаю?
    А то уже день туплю с этим.
     
  2. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    Код (Javascript):
    1. document.addEventListener('DOMContentLoaded', ()  => {
    2.   st.addEventListener('keypress', e => {
    3.     if (e.keyCode === 13) {
    4.       f1.submit();
    5.     }
    6.   });
    7. });
    Смотрите пример в песочнице
     
    #2 Deonis, 17 мар 2020
    Последнее редактирование: 17 мар 2020
    AndreyN нравится это.
  3. AndreyN

    AndreyN Новичок

    С нами с:
    16 мар 2020
    Сообщения:
    2
    Симпатии:
    0
    Спасибо, добрый человек!
    Вопросами мучить не буду, буду разбираться сам. )))

    А то я уже тут костыль изобрел, который эмулирует нажатие кнопки "Проверить"
    $(document).ready(function () {
    $('#st').keypress(function(e) {
    if(e.which == 13) {
    jQuery(this).blur();
    jQuery('#btn1').focus().click();
    }
    });

    });

    Но это реальный костыль.
    Ваш код лучше.