Stop reloading page with 'Enter Key'

Question

I have a search box at the top of page that makes an ajax call when a user hits the adjacent button. I am trying to update the input tag so that when a user hit the 'enter' key , the apropriate JavaScript takes place without reloading the page. The problem is that the page keeps reloading. Here is my latest attempt:

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

Don't bind to the input s; bind to the form . Assuming the form has an ID of searchForm :

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

Try it out.

It can also be done with plain JavaScript:

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

Answer 2

I know its a little late but I ran into the same problem as you. It worked for me using "keypress" instead of bind.

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

Answer 3

You are missing # in the selector. Try this

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

JS

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

Answer 4

Add onSubmit="return false;" on your form tag

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

Answer 5

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

Answer 6

You could set the form action attribute to javascript:void(0); that way the form doesn't post/get so the page wont refresh.

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

Answer 7

Just use the "action" attribute in <form> tag. Like this

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

Answer 8

This is what ended up working for me. Please note that my struggle was to find the object that triggered the form submit:

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

});

Answer 9

$("searchText").keypress(function(event){ 
  if(event.keyCode == 13){ 
    $("#buttonSrch").click(); 
    return false;
  }
});

Answer 10

You just need to add this:

<form @submit.prevent="search">

whatever function is triggered for search. When I press that search button search() func is triggered. That is why: @submit.prevent="search"

async search() {
  let yuyu = document.getElementById('search').value
  console.log('lsd', yuyu)
  try {
    let newRecipes = await this.$axios.$get(
      `/api/videosset/?user=&id=&title=${yuyu}&price=&category=`
    )
    this.$store.commit('CHANGE_NAV_LAYOUT', newRecipes)
  } catch (e) {
    console.log(e)
  }
},

Answer 11

Does your JS execute immediately or on document ready? If it's not in a document ready the button won't exist at the time you're trying to call bind .