How to submit a form by pressing "enter"?

Asked

Viewed 1,588 times

0

Like I do a kind of click for a input without using button? For example, I will click on input type what I want to search for and when to press ENTER the form will be sent. How do I do this with jQuery?

<input type="text" placeholder="Buscar" id="buscar" name="q" />
  • yes I have the part in php that returns what write in this input you want me to post?

  • I’m not doing this part by ajax I just wanted to check not to let it go blank just that the rest can stay the way it is

  • like I know how to check but with a boot without the boot so I don’t know what kind to force a click without the boot

2 answers

3


In the manner below it will verify whether something was written by means of the regular expression /\w/, ignoring the white spaces.

Edited example:

$("#buscar").on("blur", function(e) {
  verify(e);
});
$("#buscar").on("keypress", function(e) {
  if (e.keyCode == 13) {
    verify(e);
  }
});

function verify(e) {
  if (!(/\w/.test($("#buscar").val()))) {
    e.preventDefault();
    $('p').html('Preencha algo!');
  } else {
    $('p').html('');
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="">
  <input type="text" id="buscar">
</form>
<p></p>

I used the function Blur() which is triggered by the user to remove the focus from the input. But if you prefer the click, just put .on("click",.

  • but this way he starts the search he opens my php file I do not know if I programmed right pq type I want that when clicked he will check if you have something typed if you have not typed it does n

  • $("#fetch"). on("keypress", Function(e){ var busca = $("#fetch").val(); if(e.keycode == 13){ if(search == ""){ Alert("test"); Return; } $("form").Submit(); //Your form will be submitted } });

  • would be that way I did check before Submit

  • hum.. I imagine you understand. But @Leonardocosta, the function click in a text ciaxa is somewhat strange, will you not prefer a blur?

  • I will edit the answer with some additional examples.

  • Blur never used or know how it uses but I just wanted this msm not send the form so to check if it is filled

  • Reply edited @Leonardocosta

  • I know that but I want something more visual show a custom Alert these things

  • @Samirbraga in this is only when I take out the input Focus does not go with enter?

  • guy I said I do not want to send the form I want to see when give enter if there is something written in the input if there is something written yes it goes and executes the form if there is nothing written it gives an Alert asking to write

  • intendeu @Renan?

  • @Leonardocosta, the way it is, is it good? Just put the function to be excutated also enter? Or lack something else?

  • type I only wanted to be executed with enter but without sending the form @Samirbraga

  • when I enter it will enter my check if it is filled in that input if it is filled in the input it will submit the form if the input is empty it will give an Alert without submitting the intended form?

  • @Leonardocosta, I imagine that the way I put it now should give everything right

  • Perfect @Samirbraga!

  • I’m glad I could help :).

Show 12 more comments

1

You don’t need to capture if the ENTER was typed in the input, because when the enter key is pressed inside an input element in a form, by default the form will be sent.

What you need to do is prevent the form from being sent and for this you can use the event#preventDefault():

$(function() {
  
  $('#buscar').on('submit', function(event) {
    // Prevenindo a ação padrão (enviar o formulário).
    event.preventDefault();

    // Pegando o valor inserido no input.
    var searchFor = $(this).find('input').val();

    if (!searchFor) {
      alert("Form ñ enviado porque...");
    } else {
      alert("Form enviado.");
      // $(this).submit();
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!--
  - Trocando o '#buscar' para o formulário, ao invés do input.
  -->
<form id='buscar'>
  <input type='search' placeholder='Buscar por...' />
</form>

  • 1

    A great option!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.