Invio di un modulo su "Invio" con jQuery?

Ho un modulo di login standard: un campo di testo e-mail, un campo password e un pulsante di invio su un progetto AIR che utilizza HTML / jQuery. Quando premo Invio sul modulo, il contenuto dell'intero modulo scompare, ma il modulo non viene inviato. Qualcuno sa se si tratta di un problema di Webkit (Adobe AIR utilizza Webkit per HTML) o se ho rovinato tutto?

Provai:

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
  }
});

Ma ciò non ha fermato il comportamento di compensazione o inviato il modulo. Non ci sono azioni associate al modulo: potrebbe essere questo il problema? Posso mettere una funzione JavaScript nell'azione?

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
    return false;    //<---- Add this line
  }
});

Dai un'occhiata a questa risposta di StackOverflow: event.preventDefault () vs. return false

In sostanza, "return false" è lo stesso di call e.preventDefaulte e.stopPropagation().

Oltre a restituire false, come menzionato da Jason Cohen. Potrebbe essere necessario prevenire anche Default

e.preventDefault();

Non so se ti aiuterà, ma puoi provare a simulare un clic sul pulsante di invio, invece di inviare direttamente il modulo. Ho il seguente codice in produzione e funziona benissimo:

    $('.input').keypress(function(e) {
        if(e.which == 13) {
            jQuery(this).blur();
            jQuery('#submit').focus().click();
        }
    });

Nota: jQuery ('# submit'). Focus () rende animato il pulsante quando si preme invio .

Ritorna falseper impedire che la sequenza di tasti continui.

C'è qualche motivo per cui devi agganciare e testare la chiave di invio?

Non potresti semplicemente aggiungere un

<input type="submit" /> 

al modulo e lo hai naturalmente inviato quando viene premuto Invio? Puoi anche agganciare l' onsubmitazione del modulo e chiamare una funzione di convalida da lì se vuoi ...

Puoi anche usare il onsubmittest come test per vedere se il tuo modulo è stato inviato, ma non funzionerà se chiami form.submit().

Ecco un modo per farlo come plugin JQuery (nel caso in cui si desideri riutilizzare la funzionalità):

$.fn.onEnterKey =
    function( closure ) {
        $(this).keypress(
            function( event ) {
                var code = event.keyCode ? event.keyCode : event.which;

                if (code == 13) {
                    closure();
                    return false;
                }
            } );
    }

Ora se vuoi decorare un <input>elemento con questo tipo di funzionalità è semplice come questo:

$('#your-input-id').onEnterKey(
    function() {
        // Do stuff here
    } );

È inoltre possibile semplicemente aggiungere onsubmit="return false"al codice del modulo nella pagina per impedire il comportamento predefinito.

Quindi agganciare ( .bindo .live) l' submitevento del modulo a qualsiasi funzione con jQuery nel file javascript.

Ecco un codice di esempio per aiutare:

HTML

<form id="search_form" onsubmit="return false">
   <input type="text" id="search_field"/>
   <input type="button" id="search_btn" value="SEARCH"/>
</form>

Javascript + jQuery

$(document).ready(function() {

    $('#search_form').live("submit", function() {
        any_function()
    });
});

Funziona dal 13/04/2011 con Firefox 4.0 e jQuery 1.4.3

Questo è il mio codice:

  $("#txtMessage").on( "keypress", function(event) {
    if (event.which == 13 && !event.shiftKey) {
        event.preventDefault();
        $("#frSendMessage").submit();
    }
    });

Inoltre, per mantenere l'accessibilità, è necessario utilizzarlo per determinare il codice chiave:

c = e.which ? e.which : e.keyCode;

if (c == 13) ...

Basta aggiungere per una facile implementazione. Puoi semplicemente creare un modulo e quindi nascondere il pulsante di invio:

Per esempio:

<form action="submit.php" method="post">
Name : <input type="text" name="test">
<input type="submit" style="display: none;">
</form>

Adesso lo uso

$("form").submit(function(event){
...
}

All'inizio ho aggiunto un eventhandler al pulsante di invio che ha prodotto un errore per me.

Ho scoperto oggi che l'evento keypress non viene generato quando si preme il tasto Invio, quindi potresti voler passare a keydown () o keyup () invece.

Il mio script di prova:

        $('.module input').keydown(function (e) {
            var keyCode = e.which;
            console.log("keydown ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keyup(function (e) {
            var keyCode = e.which;
            console.log("keyup ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keypress(function (e) {
            var keyCode = e.which;
            console.log("keypress ("+keyCode+")");
            if (keyCode == 13) {
                console.log("Enter");
                return false;
            }
        });

L'output nella console quando si digita "A Enter B" sulla tastiera:

keydown (65)
keypress (97)
keyup (65)

keydown (13)
enter
keyup (13)
enter

keydown (66)
keypress (98)
keyup (66)

Si vede nella seconda sequenza il 'keypress' mancante, ma keydown e keyup registrano il codice '13' mentre viene premuto / rilasciato. Come da documentazione jQuery sulla funzione keypress () :

Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

Testato su IE11 e FF61 su Server 2012 R2

Nei codici HTML:

<form action="POST" onsubmit="ajax_submit();return false;">
    <b>First Name:</b> <input type="text" name="firstname" id="firstname">
    <br>
    <b>Last Name:</b> <input type="text" name="lastname" id="lastname">
    <br>
    <input type="submit" name="send" onclick="ajax_submit();">
</form>

Nei codici Js:

function ajax_submit()
{
    $.ajax({
        url: "submit.php",
        type: "POST",
        data: {
            firstname: $("#firstname").val(),
            lastname: $("#lastname").val()
        },
        dataType: "JSON",
        success: function (jsonStr) {
            // another codes when result is success
        }
    });
}

Prova questo:

var form = document.formname;

if($(form).length > 0)
{
    $(form).keypress(function (e){
        code = e.keyCode ? e.keyCode : e.which;
        if(code.toString() == 13) 
        {
             formsubmit();
        }
    })
}