How do I press enter without refreshing page?

Question

I'm currently working on a wiki search project, and I've been met with a problem that I haven't been able to find an answer for on stackoverflow. I'm trying to execute a XMLHttp request when the enter key is pressed, but I haven't been able to get it to work. It always refreshes the page even though I've tried keyup, keydown, submit,and the bind method.

HTML code:

         <form class="form-search ngen-search-form" action="" method "get">
         <input type="text"name="q"id = "search-input"class="form-search 
          input"placeholder="Search keywords..."dir="ltr">
         <span class="glyphicon glyphicon-search form-search-submit" 
           id="search-trigger"aria-hidden="true"></span>
         </form>

JS code:

$(document).ready(function(){
  //clicking search button expands search bar
  $('#search-trigger').on('click',function(e){
    e.preventDefault();
    if(!$('#search-input').hasClass("search-input-open")){
      $('#search-input').addClass('search-input-open');
    }else{
      send();
    }
  });
  //--problem here-- enter button refreshes page instead of executing js
  $("#search-input").keyup(function (e) {
          if(e.keyCode==13){
            console.log('works');
            send();
          }
         });
//click away from search form causes search bar to close
  $(document).on('click', function(e) {
    e.preventDefault();
    if(!$(e.target).is('#search-trigger')&&!$(e.target).is('#search-input')) {
      $('#search-input').removeClass('search-input-open');
    }
  });
  //request function to wikipedia API
  function send(){
    var xhr = new XMLHttpRequest();
    //add precautionary if nothing entered
    var searchTerm = document.getElementById('search-input').value;
    var string = "http://en.wikipedia.org/w/api.php?action=opensearch&origin=*&search=" + searchTerm + "&formatversion=2&format=json";
    xhr.open('GET',string);
    xhr.onload = function(){
      console.log(xhr.responseText);
    };
    xhr.send();
  }
});

Maybe the form is being submitted? Try returning false on the onsubmit event of the form. — H77, Jul 14 '17 at 03:33
I think you need to put `e.preventDefault()` before `console.log()` inside the `keyup` event handler. — Yatin, Jul 14 '17 at 03:34
The problem is the form is being submitted. Your question is actually a duplicate, see this question for details: https://stackoverflow.com/questions/895171/prevent-users-from-submitting-a-form-by-hitting-enter — Dwayne Charrington, Jul 14 '17 at 03:35
Possible duplicate of [Prevent users from submitting a form by hitting Enter](https://stackoverflow.com/questions/895171/prevent-users-from-submitting-a-form-by-hitting-enter) — Dwayne Charrington, Jul 14 '17 at 03:35
I suggest you should have a look about `event.preventDefault()` and `event.stopPropagation()` for future development. It really helps. — Kai, Jul 14 '17 at 03:56
Thanks guys for all the help. Using the preventDefault method helped solve my problem. — Kazou1388, Jul 15 '17 at 02:52

score 1 · Answer 1 · answered Jul 14 '17 at 03:34

Use e.preventDefault() to prevent the page refresh.

 $("#search-input").keyup(function (e) {
      if(e.keyCode==13){
        e.preventDefault();
        console.log('works');
        send();
      }
     });

score 1 · Accepted Answer · answered Jul 14 '17 at 05:27

This is happening because your form is getting submitted. Use the below code to prevent it.

$("form").submit(function(e){
    e.preventDefault();
});

$(document).ready(function(){
  //clicking search button expands search bar
  $('#search-trigger').on('click',function(e){
    e.preventDefault();
    if(!$('#search-input').hasClass("search-input-open")){
      $('#search-input').addClass('search-input-open');
    }else{
      send();
    }
  });
  
  $("form").submit(function(e){
        e.preventDefault();
    });
  
  //--problem here-- enter button refreshes page instead of executing js
  $("#search-input").keyup(function (e) {
          if(e.keyCode==13){
            console.log('works');
            send();
          }
         });
//click away from search form causes search bar to close
  $(document).on('click', function(e) {
    e.preventDefault();
    if(!$(e.target).is('#search-trigger')&&!$(e.target).is('#search-input')) {
      $('#search-input').removeClass('search-input-open');
    }
  });
  //request function to wikipedia API
  function send(){
    var xhr = new XMLHttpRequest();
    //add precautionary if nothing entered
    var searchTerm = document.getElementById('search-input').value;
    var string = "https://en.wikipedia.org/w/api.php?action=opensearch&origin=*&search=" + searchTerm + "&formatversion=2&format=json";
    xhr.open('GET',string);
    xhr.onload = function(){
      $('#result').text(xhr.responseText);
    };
    xhr.send();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-search ngen-search-form" action="" method "get">
   <input type="text"name="q"id = "search-input"class="form-search 
    input"placeholder="Search keywords..."dir="ltr">
   <span class="glyphicon glyphicon-search form-search-submit" 
     id="search-trigger"aria-hidden="true"></span>
</form>
<div id="result"></id>

score 0 · Answer 3 · edited Jul 14 '17 at 07:18

0

You can disable Enter key in following ways

By using html attribute.

<form ... onkeypress="return event.keyCode != 13;">

By using Jquery.

$(document).on("keypress", "form", function(event) { 
   return event.keyCode != 13;
});

edited Jul 14 '17 at 07:18

Hassan Imam

21,956
5
41
51

answered Jul 14 '17 at 06:36

perumal N

641
2
10
27

How do I press enter without refreshing page?

3 Answers3