Formular wird beim Drücken der Eingabetaste nicht gesendet

Question

Ich habe den folgenden HTML/JS/jQuery Code. Dieser Code stellt ein Anmeldeformular dar, das dem Benutzer modal präsentiert wird, um ihm die Anmeldung zu ermöglichen. Das Problem ist, wenn ich die Eingabetaste drücke, scheint das Formular das Ereignis "onsubmit" nicht auszuführen. Wenn ich auf die Schaltfläche am unteren Ende des Formulars klicke (die praktisch den gleichen Code wie das onsubmit-Ereignis enthält), funktioniert es einwandfrei. Ich frage mich, ob mir jemand sagen kann, warum dieses Formular nicht übermittelt wird ? Für jede Hilfe wäre ich dankbar.

jQuery Code zum Anzeigen des Login Modals:

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

HTML-Code

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

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

Wenn Sie mehr als eine button in Ihrem Formular angegeben, wenn sie nicht das Attribut type angegeben sind, aber einen Tabindex mit höherer Priorität haben, wird die erste dieser Schaltflächen vor der button[type=submit] . Daher sollten Sie die type=button zu solchen Schaltflächen. Ex.:

<!-- inputs -->
<button type="button">action 1</button>
<button type="button">action 2</button>

<button type="submit">Submit form</button> <!-- With "Enter" this one will be triggered-->

Answer 2

Ich möchte auch hinzufügen, dass, wenn Sie verschachtelte <form> ist, dann nur <input> direkt im Formular wird das Absenden bei Eingabe ausgelöst, Eingaben in verschachtelten Formularen funktionieren nicht.

<form submit="onSubmit">
 <input type="text" name="submits-on-enter" />
 <form submit="onSubmitNested">
    <input type="text" name="DOES-NOT-submit-on-enter" />
 </form>
 <button type="submit">SAVE</button>
</form>

Answer 3

Vergewissern Sie sich außerdem, dass es im Formular nur eine einzige Schaltfläche zum Absenden gibt.
d.h. eine einzige

<input type="submit">

Anweisung

Dies gilt auch dann, wenn Sie es mit JavaScript ein- oder ausblenden.

Wenn Sie aus irgendeinem Grund mehrere Übermittlungsschaltflächen in Ihrem Formular haben, ist der einzige verfügbare Ansatz, auf Übermittlungsereignisse mit JavaScript zu hören.