[英]Form not submitting when pressing 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"> </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;
}
我也在为同样的问题苦苦挣扎; 我的一个表单在文本字段中按“输入”时提交,没有问题; 在我的一生中,同一页面上的另一个类似的表单根本不会提交。
两个字段都没有提交按钮,也没有使用 javascript 进行任何提交。
我发现,当表单中只有一个文本字段时,在文本字段中按“输入”会自动提交; 但是如果有多个(常规(即单行)文本输入)字段,它什么也不做,除非还有某种“提交”按钮。
显然这是HTML 2.0 规范的一部分:
当表单中只有一个单行文本输入字段时,用户代理应该在该字段中接受 Enter 作为提交表单的请求。
...显然是一种提交简单查询的便捷方式,但降低了在复杂表单上尝试填写时过早提交的风险。许多浏览器实现者(例如 Netscape、Opera、Lynx 的各种版本等)。 ..) 遵循了这个建议,尽管它的解释似乎略有不同。
我制作了一个 JSFiddle 来演示. 据我所知(只是懒惰地用 Chrome 测试),如果只有一个文本字段,或者如果有一个提交按钮,即使它是隐藏的,表单也会在“Enter”时提交。
(编辑:我后来发现,如果还有其他不是常规单行文本输入的输入字段,它似乎也有效……例如,textareas、selects 等——感谢@user3292788 提供的信息。更新了 JSFiddle 以反映这一点)。
<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>
你有两个选择:
<input type=submit>
,这就是您所追求的自动 Enter Key 行为的原因。它也可以来自与表单中<button>
的 javascript 绑定。 例如,如果你有
<button id='button'>Reset</button>
<span id="textToReset">some info</span>
<script type="text/javascript">
$('#button').bind('click', function(){
$('#textToReset').text('');
return false;
})
</script>
您的 Enter 按钮将被return false
捕获,并且您的表单不会在 Enter 键下提交。 正确的方法是指定<button>
ACT 作为按钮。 这边走 :
<button id='button' type="button">Reset</button>
并删除您放置在那里的return false
以防止该按钮提交表单。 ;-)
为了学习, <button>
类型默认是submit。 如果您希望它们充当表单的控件,则必须指定type="button"
或type="reset"
有关它的信息,请参阅 w3.org
以防万一有人和我犯同样的错误,也来这里寻找答案:
如果您的表单中有两个(或更多)提交按钮1 ,按 Enter 键只会触发第一次提交,而不会触发第二次提交。
1正如@paul-daoust 在他对@gddc 的回答的评论中所指出的: <input type=submit>
和<button type=submit>
都将用作提交按钮
如果您有正确的输入提交按钮,但在该按钮上使用 (click) 事件,则不会在输入时触发它。 显然,它会提交表单但不会触发按钮上的点击事件。 将功能置于形式本身及其提交事件将使其工作。
我还想补充一点,如果您嵌套了<form>
,那么只有<input>
直接在表单中会在输入时触发提交,嵌套表单中的输入不起作用。
<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>
此外,请确保表单中只有一个提交按钮。
即单个
<input type="submit">
陈述
即使您使用 JavaScript 隐藏或显示它,这也适用。
如果由于某种原因您的表单中有多个提交按钮,唯一可用的方法是使用 JavaScript 监听提交事件。
当您在表单中指定了多个button
时,如果它们没有指定属性type
但它们具有更高优先级的 tabindex,则这些按钮中的第一个将在button[type=submit]
之前触发它们。 因此,您应该将type=button
添加到此类按钮。 前任。:
<!-- 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-->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.