Modulo non inviato quando si preme invio

Ho il seguente codice HTML / JS / jQuery. Questo codice rappresenta un modulo di accesso che viene presentato modalmente all’utente per consentire l’accesso. Il problema è che quando premo invio, il modulo non sembra eseguire l’evento “onsubmit“. Quando faccio clic sul pulsante come parte inferiore del modulo (che ha praticamente lo stesso codice dell’evento onsubmit), funziona perfettamente. Mi chiedo se qualcuno può dirmi perché questo modulo non sta presentando ..? Qualsiasi assistenza sarebbe apprezzata.

Codice jQuery per mostrare il modal di accesso:

showDivAndFocus('loginModal','loginaccount'); function showDivAndFocus(v,t){ if (api) if (api.isOpened) api.close(); api = $('#'+v).overlay({ mask: {color: '#000000'}, top:'0px', api: true, autoScrollToActive: false, autoScrollOffset: 0 }).load(); document.getElementById(t).focus(); } 

Codice HTML

  

Chiamata AJAX

 function doLogin(){ var ajax = getXmlObject(); var f = getFormVariables(); var url= '/login.php?f=' + encodeURIComponent(f); if (ajax.readyState == 4 || ajax.readyState == 0) { ajax.open("POST", url, true); ajax.onreadystatechange = function () { if (ajax.readyState == 4) { var a = ajax.responseText; if (a=="OK"){...} else {...} } }; ajax.send(null); } return false; } 

Hai due scelte:

  1. Crea un gestore di eventi per il pulsante Invio e aggiungilo ai tuoi binding.
  2. Usa un nel modulo da qualche parte, che è ciò che ottiene il comportamento automatico di Enter Key che stai cercando.

Ero alle prese con questo stesso problema; una delle mie forms era stata inviata premendo “invio” nei campi di testo senza problemi; un’altra, simile, forma sulla stessa pagina non si sottometterebbe affatto, per la vita di me.

Nessuno dei due campi aveva un pulsante di invio, e nessuno dei due stava usando javascript per fare alcuna sottomissione.

Quello che ho trovato, è che quando c’è un solo campo di testo in un modulo, premendo “invio” nel campo di testo si invierà automaticamente; ma se c’è più di un campo (normale (cioè a riga singola)), non fa nulla, a meno che non ci sia anche un qualche tipo di pulsante ‘invia’.

Apparentemente questo fa parte delle specifiche HTML 2.0 :

Quando c’è un solo campo di input di testo a riga singola in un modulo, l’interprete deve accettare Invio in quel campo come richiesta per inviare il modulo.

Una discussione vecchia, ma apparentemente ancora valida e interessante qui .

… evidentemente inteso come un modo conveniente per inviare query semplici, ma riducendo il rischio, in una forma complessa, di inviarlo prematuramente mentre si tenta di riempirlo. Numerosi implementatori di browser (ad esempio Netscape, Opera, varie versioni di Lynx ,. ..) ha seguito questo consiglio, anche se sembra con interpretazioni leggermente diverse.

Ho fatto un JSFiddle per dimostrare . Per quanto posso dire (pigramente solo testando con Chrome), il modulo verrà inviato su “Invio” se c’è un solo campo di testo, o se c’è un pulsante di invio, anche se è nascosto.

(EDIT: In seguito ho scoperto che sembra funzionare anche se ci sono altri campi di input che non sono un normale input di testo a riga singola … ad esempio, textareas, select, ecc. – grazie a @ user3292788 per tali informazioni. Aggiornato il JSFiddle per riflettere questo).

 

Form with one text field only, no submit button

Seems to submit automatically when pressing 'enter' in the first text field

Form with two text fields, no submit button

Won't submit when pressing 'enter' in the forms ...

Form with two text fields and a submit button ...

Now it submits with 'enter' key

Form with two text fields and a HIDDEN submit button ...

Seems to work, even with submit hidden ...

Form with no action or method attribute, HIDDEN submit button ...

Even this seems to work.

Form with multiple fields, but only one text input, no submit button.

This seems to work as well.

Può anche provenire da un collegamento javascript a un nel modulo. Ad esempio, se lo hai

  some info  

Il tuo pulsante Invio verrà catturato da qualche parte in caso di return false e il tuo modulo non verrà inviato sotto il tasto Invio. Il modo corretto è specificare che ACT come pulsante. Per di qua :

  

e rilascia il return false che hai messo lì per impedire a quel pulsante di inviare un modulo. 😉

Per motivi di apprendimento, il tipo è per impostazione predefinita. Se vuoi che agiscano come controllo per il tuo modulo, devi specificare il type="button" o type="reset" Vedi w3.org a riguardo