Tengo un botón de enviar como este :

<input type="button" id="button_sign_in" class="button_sign_in" value="Sign in"/>

y he jQuery presentar como este :

$(document).ready(function()
    {
        $('#button_sign_in').click(function(){
             console.log('login');
            $.ajax
            ({
                url: "login",
                type: "post",
                data: $('#login_form').serialize(),
                dataType:'json',
                success: function (data) 
                {
                    if (data.status=='SUCCESS') 
                    {
                        window.location='home.php'; 
                    }
                    else 
                    {
                        $('#button_sign_in').shake(4,6,700,'#CC2222');
                        $('#username').focus();
                    }
                },
                error: function (e) {
                    console.log('error:'+e);
                }
            });
        });
    });

El problema es : no se puede enviar usando la tecla entrar, por lo que el usuario debe hacer clic en el botón iniciar sesión para enviar.

Lo que yo quiero ? conjunto de introducir la llave en la función JS, por lo que el usuario puede elegir presentar el uso de la tecla enter o haga clic en el botón iniciar sesión.

Gracias por la ayuda.

  • ¿Qué otra cosa hace el formulario consisten? Que es lo que va a determinar cómo solucionar el problema.
  • el botón debe estar enfocado (usando la tecla tab) y, a continuación, pulse enter.
  • oh.. que quería que la presskey evento en el botón?.. es el ejemplo principal como se describe a continuación.. $(«#button_sign_in»).bind(«keypress», function(e){ //comprobar el correo.keyCode === 13.. si es true hacer post })

7 Comentarios

  1. 5

    Comprobar esta demo http://jsfiddle.net/yeyene/hd7zqafg/

    Primero haga clic en el resultado de marco (porque no hay otro marcos), y presione entrar, haga clic en el botón enviar evento ocurrirá en la tecla Enter pulse & haga clic en el botón.

    $(document).ready(function()               
        {
            //enter keyd
            $(document).bind('keypress', function(e) {
                if(e.keyCode==13){
                     $('#button_sign_in').trigger('click');
                 }
            });
    
            $('#button_sign_in').click(function(){
                alert('You click submit!');
                 console.log('login');
                $.ajax
                ({
                    url: "login",
                    type: "post",
                    data: $('#login_form').serialize(),
                    dataType:'json',
                    success: function (data) 
                    {
                        if (data.status=='SUCCESS') 
                        {
                            window.location='home.php'; 
                        }
                        else 
                        {
                            $('#button_sign_in').shake(4,6,700,'#CC2222');
                            $('#username').focus();
                        }
                    },
                    error: function (e) {
                        console.log('error:'+e);
                    }
                });
            });
        });
    • Muy cool… Trabajado ahora muchas gracias @yeyene… 🙂
    • Usted es bienvenido 🙂
  2. 2

    Extracto de la convocatoria a $.ajax a una nueva función que se llama algo así como submitForm.

    A continuación, se unen a la función a todos los elementos que pueden causar una presentación:

    function submitForm() {
        $.ajax... etc.
    }
    
    $('#button_sign_in').on('click', submitForm);
    $('#your_input_textbox').on('keypress', function(e) {
        if (e.keyCode === 13) {
            submitForm();
        }
    });
    • Yo he optado por duplicar el código en mi muestra para el depurador parte, pero sí.. una llamada al método con un argumento de cadena es probablemente el camino a seguir.
  3. 1

    envuelva el input en un formulario. Si pulsa enter en el cuadro de texto que va a enviar el formulario.

    HTML

    <form>
        <input type="text"/>
        <input type="submit" id="button_sign_in" class="button_sign_in" value="Sign in"/>
    </form>

    cambiar el input tipo de "submit" y llame a .submit() en lugar de .click() en el form.

    JS

    $('form').submit(function(){
        console.log('login');
    });

    http://jsfiddle.net/nQ5fN/

    • Hola, estoy usando el botón de batido. Así que si puedo cambiar el tipo de entrada utilizando el tipo de envío, el botón no funciona.
    • ¿A qué te refieres con el botón batido? No hay suficiente información.
    • Estoy bastante seguro de que el elemento de formulario de envío del método es parte de la forma de los elementos, y no tiene nada que ver con si hay o no hay una instancia de un input[type=submit] niño elemento de esa forma.
  4. 0

    Cambiar su tipo de entrada como para enviar y evitar el default de su botón de enviar. También su botón de envío deben ser envueltos por un formulario.

    $(«formulario»).en(«enviar», function() { return false; });

    • yeah.. OP dio un código incompleto de la muestra, pero ¿cuál es el punto de retorno false en caso de presentar un formulario?.. o evento molestando con el evento en general?.. él no está tratando de enviar el formulario como «application/x-www-form-urlencoded’
  5. 0

    Si sólo vas a usar jQuery.Ajax, sin duda no será capaz de envío cuando usted presione entrar.
    Usted tiene que agregar <form></form> etiqueta para darse cuenta de ello, y cambiar el JS.

    $('form').submit(function(){ //do ajax here })
  6. 0

    Necesitará conectar un evento para el buen elemento (probablemente una entrada), que supongo que es un ‘nombre de usuario’ (textbox) de entrada o (más probable) la «contraseña» (password) de entrada.

    jsFiddle: http://jsfiddle.net/tyxPu/

    jQuery Sección

    $(document).ready(function () {
    var xhrJSON;
    $('#button_sign_in').click(function () {
    console.log('login');
    xhrJSON = $.ajax({
    url: "about:blank",
    type: "post",
    data: $('#login_form').serialize(),
    dataType: 'json',
    success: function (data) {
    if (data.status == 'SUCCESS') {
    window.location = 'home.php';
    } else {
    /*$('#button_sign_in').shake(4, 6, 700, '#CC2222');*/
    $('#username').focus();
    $("#debugger").append("<p>Button Click - Failed to 'Sign In'</p>")
    }
    },
    error: function (e) {
    console.log('error:' + e);
    $("#debugger").append("<p>Error - Button Click - Failed to 'Sign In'</p>")
    }
    });
    });
    $("#username").keypress(function (event) {
    if (event.which == 13) {
    xhrJSON = $.ajax({
    url: "about:blank",
    type: "post",
    data: $('#login_form').serialize(),
    dataType: 'json',
    success: function (data) {
    if (data.status == 'SUCCESS') {
    window.location = 'home.php';
    } else {
    /*$('#button_sign_in').shake(4, 6, 700, '#CC2222');*/
    $('#username').focus();
    $("#debugger").append("<p>Button Click - Failed to 'Sign In'</p>");
    }
    },
    error: function (e) {
    $("#debugger").append("<p>Error - Keypress - Failed to 'Sign In'</p>");
    }
    });
    }
    });
    });

    Sección HTML

    <form id="login_form">
    <input type="textbox" id="username" placeholder="User Name" />
    <input type="button" id="button_sign_in" value="Sign In" />
    </form>
    <div id="debugger"></div>
    • nota en este ejemplo he cambiado la url a «about:blank» y comentó el batido de método.
  7. 0
     //Get the input field
    var input = document.getElementById("myInput");
    //Execute a function when the user releases a key on the keyboard
    input.addEventListener("keyup", function(event) {
    //Cancel the default action, if needed
    event.preventDefault();
    //Number 13 is the "Enter" key on the keyboard
    if (event.keyCode === 13) {
    //Trigger the button element with a click
    document.getElementById("myBtn").click();
    }
    });

Dejar respuesta

Please enter your comment!
Please enter your name here