web-dev-qa-db-ja.com

Enterキーを押してもフォームが送信されない

次のHTML/JS/jQueryコードがあります。このコードは、ユーザーにログインを許可するためにユーザーにモーダルに表示されるログインフォームを表します。問題は、Enterキーを押すと、フォームが「onsubmit」イベントを実行しないように見えることです。フォームの下部にあるボタン（onsubmitイベントと実質的に同じコード）をクリックすると、完全に機能します。このフォームが送信されない理由を誰かに教えてもらえないかと思います。どんな援助もいただければ幸いです。

ログインモーダルを表示するjQueryコード：

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コード

<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呼び出し

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

正しいinput-submit-buttonがあるが、そのボタンで（クリック）イベントを使用する場合、Enterでトリガーされません。フォームを送信しますが、ボタンのクリックイベントはトリガーしません。それ自体を形成する機能とその送信イベントを配置すると、機能します。

1
Workion

誰かが私と同じ間違いを犯し、答えを求めてここに来る場合に備えて：

two（またはそれ以上）の送信ボタンがある場合1 フォームでEnterキーを押すと、最初の送信のみがトリガーされ、2番目の送信はトリガーされません。

1 @ g-d-d-cの回答に関する彼のコメントの@ paul-daoustで示されているように：両方<input type=submit>および<button type=submit>は送信ボタンとして機能します

0
yaba