Formulario no enviado al presionar enter

Question

Tengo el siguiente código HTML/JS/jQuery. Este código representa un formulario de inicio de sesión que se presenta de manera modal al usuario para permitirle iniciar sesión. El problema es que cuando presiono enter, el formulario no parece ejecutar el evento "onsubmit". Cuando hago clic en el botón como la parte inferior del formulario (que tiene prácticamente el mismo código que el evento onsubmit), funciona perfectamente. Me pregunto si alguien me puede decir por qué este formulario no se envía ... Cualquier ayuda sería apreciada.

Código jQuery para ver la sesión modal:

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(); 
} 

Código HTML

<div class="modal" id="loginModal"> 
    <h2>User Login</h2> 
    <br /> 

    <form action="javascript:void(0);" onsubmit="return(doLogin());" name="loginForm" id="loginForm"> 
     <table width="95%" cellpadding="4" cellspacing="4"> 
     <tr> 
     <td class="regw" align="left"><b>Account Number:</b></td> 
     <td class="regw" align="left"><input type="text" maxlength="10" size="10" name="loginaccount" id="loginaccount" /></td> 
     </tr> 

     <tr> 
     <td class="regw" align="left"><b>Username:</b></td> 
     <td class="regw" align="left"><input type="text" maxlength="20" size="20" name="loginusername" id="loginusername" /></td> 
     </tr> 

     <tr> 
     <td class="regw" align="left"><b>Password:</b></td> 
     <td class="regw" align="left"><input type="password" maxlength="20" size="20" name="loginpassword" id="loginpassword" /></td> 
     </tr> 

     <tr> 
     <td class="regw" align="left"><b>Remember Me:</b></td> 
     <td class="regw" align="left"><input type="checkbox" name="loginremember" id="loginremember" /></td> 
     </tr> 

     <tr><td colspan="2"> 
      <div> 
       <center> 
        <table><tr><td width="50" valign="middle"> 
         <div id="loginLoading" style="height:24px;width:24px;"></div> 
        </td><td> 
         <button onclick="doLogin();" type="button" class="ok">Submit</button> 
        </td><td> 
         <button onclick="api.close();" type="button" class="cancel">Cancel</button> 
        </td><td width="50">&nbsp;</td></tr></table> 
       </center> 
      </div> 
     </td></tr> 
     </table> 
    </form> 
</div> 

AJAX llamada

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; 
} 

Answer 1

Tiene dos opciones:

1. Cree un controlador de eventos para el botón Intro y agréguelo a sus enlaces.
2. Usa un <input type=submit> en el formulario en alguna parte, que es lo que obtiene el comportamiento automático de Enter Key que estás buscando.

Answer 2

También puede provenir de un javascript enlazar a un <button> en su formulario. Para exemple, si usted tiene

<button id='button'>Reset</button> 
<span id="textToReset">some info</span> 

<script type="text/javascript"> 
$('#button').bind('click', function(){ 
    $('#textToReset').text('');  
    return false; 
}) 
</script> 

Su botón Enter se verá atrapado en algún lugar por el return false y su forma no se presentarán con arreglo a la tecla Enter. La forma correcta es especificar que el <button> ACT sea un botón. De esta manera:

<button id='button' type="button">Reset</button> 

y soltar el return false has putted allí para evitar que el botón de enviar un formulario. ;-)

Por el bien de aprender, el tipo <button> se envía por defecto. Si desea que actúen como control de su formulario, debe especificar type="button" o type="reset"See w3.org about it

Answer 3

Estaba teniendo problemas con este mismo problema; uno de mis formularios se enviaba al presionar "enter" en los campos de texto sin problema; otra forma similar en la misma página no se sometería en absoluto, por mi vida.

Ninguno de los campos tenía un botón de envío, y ninguno de los dos utilizaba javascript para realizar ningún envío.

Lo que encontré, es que cuando solo hay un campo de texto en un formulario, al presionar 'enter' en el campo de texto se enviará automáticamente; pero si hay más de un campo de entrada (regular (es decir, una sola línea)), no hace nada, a menos que también haya algún tipo de botón 'enviar'.

Al parecer, esto es parte de la HTML 2.0 specification:

Cuando sólo hay un campo de entrada de texto de una línea en un formulario, el agente de usuario debe aceptar Introduzca en este campo como una solicitud para enviar el formulario.

An old, but apparently still valid, and interesting, further discussion here.

... evidentemente entiende como una manera conveniente de enviar consultas simples, pero los ejecutores Numerosos navegador reducir el riesgo, en una forma compleja, de manera prematura de someterlo al tratar de llenarlo. (Por ejemplo, Netscape, Opera, varias versiones de Lynx, ...) siguieron este consejo, aunque parece con interpretaciones ligeramente diferentes.

He hecho a JSFiddle to demonstrate. Por lo que puedo decir (de forma perezosa simplemente probando con Chrome), el formulario se enviará en "Enter" si solo hay un campo de texto, o si hay un botón de envío, incluso si está oculto.

(EDIT: más tarde descubrí que también parece funcionar si hay otros campos de entrada que no son una entrada de texto de línea única regular ... por ejemplo, textareas, selects, etc. - gracias a @ user3292788 para esa información. Se actualizó el JSFiddle para reflejar esto).

<h2>Form with one text field only, no submit button</h2> 
<p>Seems to submit automatically when pressing 'enter' in the first text field</p> 
<form action="" method="post"> 
    <div> 
    <label for="pt-search-input">Search</label> 
    <div> 
     <input name="term" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a></div> 
    </div> 
</form> 

<h2>Form with two text fields, no submit button</h2> 
<p>Won't submit when pressing 'enter' in the forms ...</p> 
<form action="" method="post"> 
    <div> 
    <label for="pt-search-input">Search</label> 
    <div> 
     <input name="term" type="text" placeholder="Example: budapest amsterdam" /> 
     <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a></div> 
    </div> 
</form> 



<h2>Form with two text fields and a submit button ...</h2> 
<p>Now it submits with 'enter' key</p> 
<form action="" method="post"> 
    <div> 
    <label for="pt-search-input">Search</label> 
    <div> 
     <input name="term" type="text" placeholder="Example: budapest amsterdam" /> 
     <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a> 
     <input type="submit" /> 
    </div> 
    </div> 
</form> 

<h2>Form with two text fields and a HIDDEN submit button ...</h2> 
<p>Seems to work, even with submit hidden ...</p> 
<form action="" method="post"> 
    <div> 
    <label for="pt-search-input">Search</label> 
    <div> 
     <input name="term" type="text" placeholder="Example: budapest amsterdam" /> 
     <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a> 
     <input type="submit" /> 
    </div> 
    </div> 
</form> 


<h2>Form with no action or method attribute, HIDDEN submit button ...</h2> 
<p>Even this seems to work.</p> 
<form> 
    <div> 
    <label for="search-input">Search</label> 
    <div> 
     <input name="term" type="text" placeholder="Example: budapest amsterdam" /> 
     <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a> 
     <input type="submit" /> 
    </div> 
    </div> 
</form> 

<h2>Form with multiple fields, but only one text input, no submit button.</h2> 
<p>This seems to work as well.</p> 
<form action="" method="post"> 

    <p><input type="text" ></p> 

    <textarea name="" id="" cols="30" rows="10"></textarea> 

    <p> 
    <select name="" id=""> 
     <option value="">Value</option> 
    </select> 
    </p> 
</form>