jQuery - Detect if a form was sent out by hitting ENTER

Question

Before I send the data from a form to a Rails controller, I need to do some javascript work yet.

This is (in short) my form:

<form action="/results" class="search_users" method="POST">
  ...
  <a class='search_users_btn' href='' id="search_users_form">
    <span class="streamline" aria-hidden="true">Search</span>
  </a>
</form>

When is clicked the Search button, then this piece of JS handles that:

  $(".search_users_btn").click(function(e) {
    var location;
    e.preventDefault();
    location = $(".location_user").val();
    $.when(geocodeFrom(location)).done(function() {
      $(".search_users").submit();
    });
  });

The problem is when a user hits ENTER, because then the javascript code above is not executed. I've tried to add following:

$(".search_users").keypress(function(ev){
   if (ev.keyCode == 13) {
    console.log('xx'); 
    //$("form")[0].submit();
   }
});

But this snippet doesn't handle when a user hit ENTER and the browser immediately sends the form to controller.

How to handle the situation when user presses ENTER in Javascript?

i believe you need to do a loop over all `.search_users input` and then add the keypress event. — abc123, Jan 02 '15 at 14:12
take a look at stopPropagation() function to handle the event yourself https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation — jazzytomato, Jan 02 '15 at 14:13
I didn't understand well but what i suggest is to use the keypress function in a success function using ajax. — Jeffery ThaGintoki, Jan 02 '15 at 14:15
Consider to use instead the `onsubmit` event of the FORM and set logic according to it — A. Wolff, Jan 02 '15 at 14:18

score 2 · Accepted Answer · answered Jan 02 '15 at 14:17

I think ENTER triggers a submit in a form, try this :

$(".search_users").keypress(function(ev){
   if (ev.keyCode == 13) {
    ev.preventDefault();
    console.log('gotcha'); 
    //$("form")[0].submit();
   }
});

but you could also use a standard button and handle the submit event on the form, do your processing, and then make an ajax call to the (php?) processing page :

$(".search_users").on("submit", function(ev){
   ev.preventDefault(); //prevents the original submit

    //information processing ...

    //AJAX call to the form processing page ...

   }
});

jQuery - Detect if a form was sent out by hitting ENTER

1 Answers1