how to make an event using the enter key?

Asked

Viewed 3,190 times

3

I wonder how I do to make a system like the onclick or the click if it’s jQuery.

When the user presses the key enter in a form it automatically click the button and send the form with the click.

I know how to do it but I’d like to learn that method too.

code:

 <script>
        $("#envia").click(function(){
            var campo = {
                nome: $("#nome").val(),
                email: $("#email").val(),
                assunto: $("#assunto").val(),
                message: $("#message").val()
            };

            if(!campo.nome || !campo.assunto || !campo.email || !campo.message){
                $.alert({
                title: 'Atenção',
                content: 'Todos os campos sao obrigatorios!',
                });
                return;
            }

        });
    </script>
javascript jquery

  • This is the default behavior of a form, without using javascript.

  • If the last field is one textarea you will need to use Javascript.

  • my last field and textarea but as I could use to do this I want it to do the same things I programmed in jquery click event

2 answers

3


You can use this code

$(function(){
    $('input, textarea').on('keypress', function(e){
        if (e.keyCode == 13) {
            e.preventDefault();
            $("#BotaoId").click();
        }
    });
});

If you understand English you have an answer that would also help you with javascript pure ONLY ENGLISHMAN

Your code should look like this

$(function(){
    $('input, textarea').on('keypress', function(e){
        if (e.keyCode == 13) {
            e.preventDefault();
            $('#envia').click();
        }
    });

    $("#envia").click(function(){
        var campo = {
            nome: $("#nome").val(),
            email: $("#email").val(),
            assunto: $("#assunto").val(),
            message: $("#message").val()
        };

        if(!campo.nome || !campo.assunto || !campo.email || !campo.message){
            $.alert({
            title: 'Atenção',
            content: 'Todos os campos sao obrigatorios!',
            });
            return;
        }

    });
});

  • could you explain to me where I place this function because I am seeing that it is an anonymous function and Anonimas functions are usually assigned in something I should assign this to the button? in case I tried to implement your code within the function of the boot and it will not it will not in the textarea in the others it sends arrives in the textarea it does not send anything

  • In jQuery, when you declare the name of the tag, class or id $('input, textarea'), you are already assigning to these elements the behavior of the function, you can pass several elements using the same function, to know details of the function .on()

  • type guy it is not giving enter when I am in the textarea in the other inputs it goes more in the textarea not

  • See if the console shows an error, follow the example working Jsfiddle

  • no errors in the console if I post my code snippet you show me where I should implement? should be where I am implementing

  • You can yes, edit your question and add your code

  • ready-made

  • I added in the answer how it should look, in case you have more input or textarea on your page change that part $('input, textarea') putting the id's of the fields you want the function to work

  • can cre vlw man thanks for the help

  • 2

    You don’t need all this. Just the form have a input of the kind submit enter it into any input fires the submit.

Show 5 more comments

3

You can use a delegate event. Delegate in the form but check to make sure you’re sure of what’s going to happen and what element you’re in. For example:

$('#idDaMinhaForm').on('keyup', function(e){
    if(e.which != 13) return; // não é o "enter"
    if (e.target.tagName.toLowerCase() == 'input') this.submit();
});

Example: https://jsfiddle.net/x36bzdn9/

Browser other questions tagged javascript jquery

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