Остановите перезагрузку страницы с помощью "Enter Key"

У меня есть окно поиска в верхней части страницы, которое вызывает вызов ajax, когда пользователь нажимает соседнюю кнопку. Я пытаюсь обновить тег ввода, так что, когда пользователь нажимает клавишу 'enter', соответствующий JavaScript выполняется без перезагрузки страницы. Проблема в том, что страница продолжает перезагружать. Вот моя последняя попытка:

$("searchText").bind('keyup', function(event){ 
  if(event.keyCode == 13){ 
    event.preventDefault();
    $("#buttonSrch").click(); 
    return false;
  }
});

<input type='search' id='searchText' />
<input type='button' id='buttonSrch' onclick="search(document.getElementById('searchText'))" value='Search' />

Ответы

Ответ 1

Не привязывайтесь к input s; привяжите к form. Предполагая, что form имеет идентификатор searchForm:

$("#searchForm").submit(function() {
    search($("#searchText").get(0));
    return false;
});

Попробуйте.

Это также можно сделать с помощью обычного JavaScript:

document.getElementById('searchForm').addEventListener('submit', function(e) {
    search(document.getElementById('searchText'));
    e.preventDefault();
}, false);

Ответ 2

Вам не хватает # в селекторе. Попробуйте это

<input type='text' id='searchText' />

$("#searchText").bind('keyup', function(event){ 
  if(event.keyCode == 13){ 
    event.preventDefault();
    //$("#buttonSrch").click(); 
    search(this.value);
  }
});

Ответ 3

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

$('#searchText').keypress(function (e) {                                       
       if (e.which == 13) {
            e.preventDefault();
            //do something   
       }
});

Ответ 4

 $('#seachForm').submit(function(e){
      e.preventDefault();
      //do something
 });

Ответ 5

Вы можете установить атрибут action для javascript: void (0); таким образом форма не публикует/не получает, чтобы страница не обновлялась.

$(document).ready(function () {
  $('#form1').attr('action', 'javascript:void(0);');
});

Ответ 6

Добавьте onSubmit="return false;" в свой тег формы

<form onSubmit="return false;">
/* form elements here */
</form>`

Ответ 7

Выполняется ли ваша JS немедленно или на документе? Если он не готов в документе, кнопка не будет существовать во время вызова bind.

Ответ 8

Это то, что в конечном итоге работает для меня. Обратите внимание, что моя борьба заключалась в том, чтобы найти объект, который вызвал форму submit:

$('#missingStaff').submit(function (e) {
e.preventDefault();
var comment = $(document.activeElement)[0];
submitComments(comment);

});

Ответ 9

Просто используйте атрибут action в теге <form>. Как этот

<form action="#">   // your content     </form>