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

У меня есть окно поиска в верхней части страницы, которое делает вызов ajax, когда пользователь нажимает соседнюю кнопку. Я пытаюсь обновить тег ввода, чтобы при нажатии пользователем 'enter' key, apropriate 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' />
30
input javascript jquery

9 ответов

не привязывайтесь к inputs; привязка к 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);
17

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

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

JS

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

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

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

добавить onSubmit="return false;" на теге формы

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

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

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

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

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

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

0

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

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

});

0