web-dev-qa-db-fra.com

Arrêtez le rechargement de la page avec 'Enter Key'

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 input de sorte que lorsqu'un utilisateur appuie sur la touche 'enter' , le JavaScript approprié se produise sans recharger la page. Le problème est que la page continue à 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' />
javascriptjqueryinput
33
John R

Ne vous liez pas aux inputs; lie à la form. En supposant que form a un identifiant de searchForm:

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

Essaye le.

Cela peut aussi être fait avec du JavaScript simple:

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

# 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);
  }
});
15
ShankarSangoli

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

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

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

<form onSubmit="return false;">
/* form elements here */
</form>`
6
vijayscode
 $('#seachForm').submit(function(e){
      e.preventDefault();
      //do something
 });
5
Fresheyeball

Vous pouvez définir l'attribut d'action de formulaire sur javascript: void (0); de cette façon, le formulaire ne publie pas/ne récupère pas, la page ne s'actualise pas. 

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

Utilisez simplement l'attribut "action" dans la balise <form> .

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

Votre JS s'exécute-t-il immédiatement ou sur document prêt? Si ce n'est pas dans un document prêt, le bouton n'existera pas au moment où vous essayez d'appeler bind.

0
Davy8

C'est ce qui a fini par travailler pour moi. Veuillez noter que mon combat consistait à trouver l'objet qui a déclenché l'envoi du formulaire:

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

});

0
Kremena Lalova