Ajax Commit - Enter

Question

How can I make a commit with ajax using the enter key? That is, I have the following code:

 var nome = $("#nome").val();
 jQuery.ajax({
	            method: "get",
	            url: "teste.php",
	            data: { "nome": nome },
	            success: function(data){
	                alert("Enviado com Sucesso!");
	            }
        	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Nome: <input type="text" name="nome" id="nome" placeholder="Digite seu Nome">
<button>Enviar</button>

How can I do, so that when focusing on input when the enter key is pressed, it is submitted?

Answer 1

You can do it like this:

$('#nome').on('keyup', function(event) {
  if (event.which !== 13) return;
  var nome = this.value;
  jQuery.ajax({
    method: "get",
    url: "teste.php",
    data: {
      "nome": nome
    },
    success: function(data) {
      alert("Enviado com Sucesso!");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Nome: <input type="text" name="nome" id="nome" placeholder="Digite seu Nome">
<button>Enviar</button>

The important thing is to find the code of the key that was pressed, 13 to Enter.

Explanation:

• $('#nome').on('keyup', function(event) { - when the element with the ID nome receive input from a key (at the time of release of the key) it runs a function

The function called by .on('keyup' automatically receives the argument event containing information about the keyboard event, in this case the key number pressed. If the event.which for 13 this is the code of the enter key and we know then that this key was pressed.

This function has as this the element that received the event. That’s why this.value gives us the current value of the element.