Arrêtez de recharger la page avec 'Enter Key'

Question

J'ai un champ de recherche en haut de la page qui effectue un appel ajax lorsqu'un utilisateur appuie sur le bouton adjacent. J'essaie de mettre à jour la balise d'entrée afin que lorsqu'un utilisateur appuie sur la touche « entrée » , le JavaScript approprié s'exécute sans recharger la page. Le problème est que la page continue de se recharger. Voici ma dernière tentative :

 $("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' />

Answer 1

Ne vous liez pas aux input s ; lier au form . En supposant que form a un ID de searchForm :

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

Essaye le.

Cela peut également être fait avec du JavaScript simple :

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

Answer 2

Je sais que c'est un peu tard mais j'ai eu le même problème que toi. Cela a fonctionné pour moi en utilisant "keypress" au lieu de bind.

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

Answer 3

Il vous manque # dans le sélecteur. Essaye ça

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

JS

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

Answer 4

Ajoutez onSubmit="return false;" sur votre balise de formulaire

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

Answer 5

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