Submit a form with enter button

Question

With this code, i only can send the form if i press the button.

How can i send it also, if i press the enter button when the cursor is in the keyword text input? For example, i type in what im searching for, and press enter.

     $(document).ready(function(e) {

      $('#preloader').hide();

      $('#searchButton').click(function(e) {
          e.preventDefault();
          var keyword = $("input[name='keyword']").val();
          var kereses_helye = $("select[name='kereses_helye']").val();
          var kereses_rendezes = $("select[name='kereses_rendezes']").val();
          var kereses_sorrend = $("select[name='kereses_sorrend']").val();

          if (keyword != "") {
              $.ajax({
                  type: 'POST',
                  url: 'files/get_keszlet.php',
                  data: {
                      keyword: keyword,
                      kereses_helye: kereses_helye,
                      kereses_rendezes: kereses_rendezes,
                      kereses_sorrend: kereses_sorrend
                  },
                  dataType: "html",
                  cache: false,
                  beforeSend: function() {
                      $('#preloader').show();
                  },
                  success: function(data) {
                      var result = $.trim(data);
                      $('#result').html(result);
                  },
                  complete: function() {
                      $('#preloader').hide();
                  }
              });
          } else {
              alert("Nem adta meg, hogy mit keres.");
          }
      });
  });

Possible duplicate of [Enter key press event in JavaScript](https://stackoverflow.com/questions/905222/enter-key-press-event-in-javascript) — Nisarg Shah, Jun 08 '18 at 06:49

score 0 · Answer 1 · answered Jun 08 '18 at 06:50

0

Use keypress event and check for correct key

const input = document.querySelector('your-input-field');

input.addEventListener('keypress', event => {
  if (event.key === 'Enter') {
    // your code goes here
  }
});

answered Jun 08 '18 at 06:50

Matus Dubrava

13,637
2
38
54

score 0 · Answer 2 · answered Jun 08 '18 at 06:50

As you said, the cursor would be in any input,

You can do with this jquery code:

$('.input').keypress(function (e) {
  if (e.which == 13) { // 13 is the ASCII number of Enter key.
    sendRequest();    // Calling your function if Enter is pressed.
    return false;
  }
});

score 0 · Answer 3 · answered Jun 08 '18 at 06:51

Write you logic in different function and call that function on click event an on keypress event.

$(document).ready(function(e) {

    $('#preloader').hide();

    $('#searchButton').click(function(e) {
        sendRequest();
    });

    $("input[name='keyword']").keypress(function(e) {
        if (e.which == 13) sendRequest();
    });

    function sendRequest() {
        e.preventDefault();
        var keyword = $("input[name='keyword']").val();
        var kereses_helye = $("select[name='kereses_helye']").val();
        var kereses_rendezes = $("select[name='kereses_rendezes']").val();
        var kereses_sorrend = $("select[name='kereses_sorrend']").val();

        if (keyword != "") {
            $.ajax({
                type: 'POST',
                url: 'files/get_keszlet.php',
                data: {
                    keyword: keyword,
                    kereses_helye: kereses_helye,
                    kereses_rendezes: kereses_rendezes,
                    kereses_sorrend: kereses_sorrend
                },
                dataType: "html",
                cache: false,
                beforeSend: function() {
                    $('#preloader').show();
                },
                success: function(data) {
                    var result = $.trim(data);
                    $('#result').html(result);
                },
                complete: function() {
                    $('#preloader').hide();
                }
            });
        } else {
            alert("Nem adta meg, hogy mit keres.");
        }
    }
});

score 0 · Answer 4 · answered Jun 08 '18 at 06:56

0

You have to use submit event in jquery :

<form id="search-form">
  <input type="text" name="keyword"/>
  <button type="submit">Search</button> 
</form> 

$('#search-form').submit(function(){ 

   // Your code here

});

answered Jun 08 '18 at 06:56

Wellwisher

472
2
8

Submit a form with enter button

4 Answers4