web-dev-qa-db-fra.com

Formulaire non soumis en appuyant sur Entrée

J'ai le code HTML/JS/jQuery suivant. Ce code représente un formulaire de connexion qui est présenté de manière modale à l'utilisateur pour lui permettre de se connecter. Le problème est que lorsque j'appuie sur Entrée, le formulaire ne semble pas exécuter l'événement "onsubmit". Lorsque je clique sur le bouton en bas du formulaire (qui a pratiquement le même code que l'événement onsubmit), cela fonctionne parfaitement. Je me demande si quelqu'un peut me dire pourquoi ce formulaire ne soumet pas ..? Toute aide serait appréciée.

Code jQuery pour afficher la connexion modale:

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

Code 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>

Appel 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;
 }
javascripthtmlformssubmitdom-events
30
Dutchie432

Si vous avez un bouton d'entrée-soumission correct mais que vous utilisez (cliquez) un événement sur ce bouton, il ne le déclenchera pas lors de la saisie. Il soumettra le formulaire mais ne déclenchera pas d'événement de clic sur le bouton, évidemment. Mettre la fonctionnalité pour se former et son événement de soumission le fera fonctionner.

1
Workion

Juste au cas où quelqu'un commet la même erreur que moi et vient aussi ici chercher une réponse:

Si vous avez deux (ou plus) boutons d'envoi1 dans votre formulaire, appuyer sur Entrée ne déclenchera que la première soumission et non la seconde.

1 comme indiqué par @ paul-daoust dans son commentaire sur la réponse de @ g-d-d-c: Les deux <input type=submit> et <button type=submit> fonctionnera comme un bouton d'envoi

0
yaba