使用jquery来阻止表单提交在第一个preventDefault之后就不起作用了
Using jquery to prevent form from submitting does not work after the first preventDefault
我使用下面的脚本通过check.php的响应从数据库中获取一些数据,然后检查数据,如果一切都好,我想提交一个表单,否则阻止它。#order_number是我正在检查的字段(输入类型文本)和#seblod_form是表单。如果我不触发第二个e.c preventdefault,一切工作正常,表单提交ok。当我触发第二个e.c preventdefault时,表单不提交,它在html中得到一个busy类,即使okToSubmit = true,表单也不提交。有什么办法可以解决这个问题吗?
<script src="https://code.jquery.com/jquery-2.1.1.min.js">
$(document).ready(function(){
$( document ).on('keydown',function( e ) {
if (e.keyCode == 13){
e.preventDefault(); //prevent form submitting when user presses enter key
return false;
}
});
$( document ).on('keyup','#order_number',function( e ) {
if (e.keyCode != 13){
var value = $('#order_number').val();
var okToSubmit = true;
$.ajax({
type: "POST",
url: 'check.php',
data: {order_number:value},
dataType: 'json',
success: function(data) {
if (data['found'] != 'true' || data['ordernumberused'] == 'true'){
if (data['ordernumberused'] == 'true') {
$('#cck1r_form_order_number').append( $( "<div id='message' style='color:red;'>This order number is already used!!!</div>" ) );
okToSubmit = false;
}
else{
$('#message').remove();
}
$('#order_number').css("border-color", "red");
}
else {
$('#order_number').css("border-color", "green");
okToSubmit = true;
alert(okToSubmit);
}
$('#seblod_form').submit(function(e){
if (!okToSubmit){
e.preventDefault();
return false;
}
else {
return true;
}
});
}//end success
});//end ajax
}
});
});
</script>
这是代码的更新版本:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"> </script> /*hack for invoices - receipts*/
<script>
$(document).ready(function() {
var okToSubmit = true;
$('#seblod_form').submit(function(e) {
if (!okToSubmit) {
e.preventDefault();
return false;
} else {
return true;
}
});
$('input#submit').mousedown(function() {
if(okToSubmit){
$('#seblod_form').removeClass('busy');
}
});
$('input#submit').mouseup(function() {
if(okToSubmit){
$('#seblod_form').submit();
}
});
$(document).on('keydown', function(e) {
if (e.keyCode == 13) {
e.preventDefault(); //prevent form submitting when user presses enter key
return false;
}
});
$(document).on('keyup', '#order_number', function(e) {
if (e.keyCode != 13) {
var value = $('#order_number').val();
$.ajax({
type: "POST",
url: 'http://eshop.wideservices.gr/check.php',
data: {
order_number: value
},
dataType: 'json',
success: function (data) {
if (data['found'] != 'true' || data['ordernumberused'] == 'true') {
if (data['ordernumberused'] == 'true') {
if (!$('div').is('#message')){
$('#cck1r_form_order_number').append($("<div id='message' style='color:red;'>This order number is already used!!!</div>"));
}
okToSubmit = false;
} else {
$('#message').remove();
}
$('#order_number').css("border-color", "red");
} else {
$('#order_number').css("border-color", "green");
okToSubmit = true;
}
} //end success
}); //end ajax
}
});});
</script>
每次键入一个键时,您都试图附加到submit
事件。这显然是一个坏主意,因为每次你连接它将使用它自己的okToSubmit
的函数作用域值,这将导致true和false调用在同一时间。任何false
在任何情况下都会引起preventdefault()
。
尝试在更高的级别声明okToSubmit
,并且只连接一次submit
事件。
。
$(document).ready(function () {
var okToSubmit = true;
$('#seblod_form').submit(function (e) {
if (!okToSubmit) {
e.preventDefault();
return false;
} else {
return true;
}
});
$(document).on('keydown', function (e) {
if (e.keyCode == 13) {
e.preventDefault(); //prevent form submitting when user presses enter key
return false;
}
});
$(document).on('keyup', '#order_number', function (e) {
if (e.keyCode != 13) {
var value = $('#order_number').val();
okToSubmit = true;
$.ajax({
type: "POST",
url: 'check.php',
data: {
order_number: value
},
dataType: 'json',
success: function (data) {
if (data['found'] != 'true' || data['ordernumberused'] == 'true') {
if (data['ordernumberused'] == 'true') {
$('#cck1r_form_order_number').append($("<div id='message' style='color:red;'>This order number is already used!!!</div>"));
okToSubmit = false;
} else {
$('#message').remove();
}
$('#order_number').css("border-color", "red");
} else {
$('#order_number').css("border-color", "green");
okToSubmit = true;
alert(okToSubmit);
}
} //end success
}); //end ajax
}
});
});
另一个问题:
你将jQuery代码包含在一个外部JavaScript文件请求中。总之不要!。你不应该将外部JS请求和内联脚本块混合在一起,因为这不会在所有浏览器上工作(看起来真的很糟糕):)
。
<script src="https://code.jquery.com/jquery-2.1.1.min.js"/>
<script type="text/javascript">
...your inline script code here...
</script>
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 在chrome.tabs.onCreated之后加载HTML页面
- 在Jquery detachment()和appendTo()之后定位元素
- AngularJS:ng之后,重复$scope值未按预期更新
- 为什么元素的宽度在页面加载之后和那一刻之后不同
- 没有在Angular应用程序中定义firebase(在firebase迁移之后)
- Javascript复选框函数:;缺少:在属性id之后"
- 在刚刚调用的append函数之后,jquery.height()不会返回实际值
- 正在链接添加了以下内容::在之后
- JQuery hide()在show()之后不起作用,反之亦然
- 未执行Ajax循环的Javascript之后的代码
- 如何在`window.open`之后执行回调
- 如何在一个元素动画之后延迟
- 在XMLHttpRequest之后重新初始化jQuery
- <text区域>在我的html中包含event.keycode==13之后,wrap就不起作用了
- 在jAlert之后设置焦点
- 在Javascript中的ajax响应之后未调用Dropdown事件
- web浏览器中的离线应用程序存储数据并在之后上传
- 错误“;未处理'错误'事件“;在运行yo发电机之后
- 参数列表Three.js之后的未捕获语法错误:缺少)