按回车时表格不提交 [英] Form not submitting when pressing enter

问题描述

我有以下HTML / JS / jQuery代码。此代码表示以模态方式呈现给用户以允许其登录的登录表单。问题是，当我输入时，表单似乎并没有执行onsubmit事件。当我点击按钮作为表单的底部（它与onsubmit事件具有几乎相同的代码）时，它完美地工作。我想知道是否有人能告诉我为什么这个表单不提交..？

显示登录模式的jQuery代码：

  showDivAndFocus（ 'loginModal'， '登录账号'）; 
 
 function 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代码 b

 < div class =modalid =loginModal> 
< h2>用户登录< / h2> 
< br /> 
 
 
< table width =95％cellpadding =4cellspacing =4> 
< tr> 
< td class =regwalign =left>< b>帐号：< / b>< / td> 
< td class =regwalign =left>< input type =textmaxlength =10size =10name =loginaccountid =loginaccount/> < / TD> 
< / tr> 
 
< tr> 
< td class =regwalign =left>< b>使用者名称：< / b>< / td> 
< td class =regwalign =left>< input type =textmaxlength =20size =20name =loginusernameid =loginusername/> < / TD> 
< / tr> 
 
< tr> 
< td class =regwalign =left>< b>密码：< / b>< / td> 
< td class =regwalign =left>< input type =passwordmaxlength =20size =20name =loginpasswordid =loginpassword/> < / TD> 
< / tr> 
 
< tr> 
< td class =regwalign =left>< b>记住我：< / b>< / td> 
< td class =regwalign =left>< input type =checkboxname =loginrememberid =loginremember/>< / td> 
< / tr> 
 
< tr>< td colspan =2> 
< div> 
< center> 
< table>< tr>< td width =50valign =middle> 
< div id =loginLoadingstyle =height：24px; width：24px;>< / div> 
< / td>< td> 
< button onclick =doLogin（）; type =buttonclass =ok>提交< / button> 
< / td>< td> 
< button onclick =api.close（）; type =buttonclass =cancel>取消< / button> 
< / td>< td width =50>& nbsp;< / td>< / tr>< / table> 
< / center> 
< / div> 
< / td>< / tr> 
< / table> 
< / form> 
< / div> 
  

AJAX通话

 函数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）; 
} 
返回false; 
 
  

解决方案

您有两种选择： / b>

1. 为输入按钮创建一个事件处理程序并将其添加到绑定中。
   
2. 使用< input type = submit> ，这就是获得您所需的自动Enter Key行为的功能。

I have the following HTML/JS/jQuery Code. This code represents a login form that is presented modally to the user to allow them to login. The problem is, when I hit enter, the form does not seem to execute the "onsubmit" event. When I click the button as the bottom of the form (which has virtually the same code as the onsubmit event), it works perfectly. I am wondering if anyone can tell me why this form isn't submitting..? Any assistance would be appreciated.

jQuery Code to Show Login 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();
}

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 Call

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

解决方案

You have two choices:

1. Create an event handler for the enter button and add it to your bindings.
2. Use an <input type=submit> in the form somewhere, which is what gets the automatic Enter Key behavior you're after.

这篇关于按回车时表格不提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！