我在一个网站上有一个调查,用户按下回车键(我不知道为什么),不小心没有点击提交按钮就提交了调查(表单),这似乎有些问题。有办法防止这种情况吗?
我在调查中使用HTML, PHP 5.2.9和jQuery。
我在一个网站上有一个调查,用户按下回车键(我不知道为什么),不小心没有点击提交按钮就提交了调查(表单),这似乎有些问题。有办法防止这种情况吗?
我在调查中使用HTML, PHP 5.2.9和jQuery。
当前回答
一种完全不同的方法:
The first <button type="submit"> in the form will be activated on pressing Enter. This is true even if the button is hidden with style="display:none; The script for that button can return false, which aborts the submission process. You can still have another <button type=submit> to submit the form. Just return true to cascade the submission. Pressing Enter while the real submit button is focussed will activate the real submit button. Pressing Enter inside <textarea> or other form controls will behave as normal. Pressing Enter inside <input> form controls will trigger the first <button type=submit>, which returns false, and thus nothing happens.
因此:
<form action="...">
<!-- insert this next line immediately after the <form> opening tag -->
<button type=submit onclick="return false;" style="display:none;"></button>
<!-- everything else follows as normal -->
<!-- ... -->
<button type=submit>Submit</button>
</form>
其他回答
Use:
// Validate your form using the jQuery onsubmit function... It'll really work...
$(document).ready(function(){
$(#form).submit(e){
e.preventDefault();
if(validation())
document.form1.submit();
});
});
function validation()
{
// Your form checking goes here.
}
<form id='form1' method='POST' action=''>
// Your form data
</form>
在我对其他解决方案感到沮丧之后,这在所有浏览器中都有效。name_space外层函数只是为了避免声明全局变量,这也是我推荐的。
$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);
this.stifle = function(event) {
event.cancelBubble;
event.returnValue = false;
if(this.is_ie === false) {
event.preventDefault();
}
return false;
}
this.on_enter = function(func) {
function catch_key(e) {
var enter = 13;
if(!e) {
var e = event;
}
keynum = GetKeyNum(e);
if (keynum === enter) {
if(func !== undefined && func !== null) {
func();
}
return name_space.stifle(e);
}
return true; // submit
}
if (window.Event) {
window.captureEvents(Event.KEYDOWN);
window.onkeydown = catch_key;
}
else {
document.onkeydown = catch_key;
}
if(name_space.is_ie === false) {
document.onkeypress = catch_key;
}
}
}
示例使用:
$(function() {
name_space.on_enter(
function () {alert('hola!');}
);
});
在我的情况下,我有一对jQuery UI自动完成字段和文本区域的形式,所以我肯定希望他们接受进入。所以我从表单中删除了type="submit"输入,并添加了一个锚<a href="" id="btn">Ok</a>。然后我把它设置为一个按钮,并添加以下代码:
$( '#btn' ).click( function( event ){
event.preventDefault();
if ( validateData() ){
$( 'form#frm' ).append( '<input type="submit" id="frm-submit" style="display:none;"></input>' );
setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 );
}
return false;
});
如果用户填写了所有必需的字段,validateData()将成功并提交表单。
Use:
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
if(e.keyCode == 13) {
e.preventDefault();
return false;
}
});
这个解决方案适用于网站上的所有表单(也适用于使用Ajax插入的表单),只防止输入文本中的enter。把它放在文档就绪函数中,然后永远忘记这个问题。
进入你的css,把它添加进去,然后会自动阻止公式的提交,只要你有提交输入,如果你不再需要它,你可以删除它,或者输入activate和deactivate
input:disabled {
background: gainsboro;
}
input[value]:disabled {
color: whitesmoke;
}