【问题标题】:Disable submit button until field is validated on database禁用提交按钮,直到在数据库上验证字段
【发布时间】:2012-12-21 17:44:34
【问题描述】:

我正在使用 AJAX 验证输入到表单字段中的代码,如果它有效,则会显示一条消息说它是有效的,否则他们会收到一条消息它是无效的。这部分没有问题。我要做的下一件事是禁用提交按钮,直到代码有效,否则用户可以输入他们想要的任何内容并仍然转到下载页面。我的脚本如下:

$(document).ready(function(){

$("#orgname").change(function() { 

var usr = $("#orgname").val();

if(usr.length >= 2)
{
$("#status").html('<img align="absmiddle" src="images/loader.gif" /> Checking Code...');

$.ajax({ 
type: "POST", 
url: "checkcode.cfm", 
data: "orgname="+ usr, 
success: function(msg){ 

$("#status").ajaxComplete(function(event, request, settings){ 

if(msg == 'OK')
{ 
$("#orgname").removeClass('object_error'); // if necessary
$("#orgname").addClass("object_ok");
 document.getElementById("formsubmit").removeAttribute("disabled");
$(this).html(' <img align="absmiddle" src="images/accepted.png" /> ');
} 
else 
{ 
$("#orgname").removeClass('object_ok'); // if necessary
$("#orgname").addClass("object_error");
$(this).html(msg);
document.getElementById("formsubmit").setAttribute("disabled", "disabled");

}});}});}
else
{
$("#status").html('The Code should have at least 2 characters.');
$("#orgname").removeClass('object_ok'); // if necessary
$("#orgname").addClass("object_error");
}});});

我也是 AJAX 的新手。如您所见,我将启用和禁用脚本放在正确的位置,但它不起作用。如果我在按钮上使用样式或禁用属性,它将保持禁用状态。同样,如果我在此页面加载时使用 JS 禁用按钮,它会一直处于禁用状态。

感谢任何帮助。

【问题讨论】:

  • 你检查}});}});}是否正确关闭了所有blocks/etc并且没有导致语法错误,导致JS没有执行?

标签: javascript html ajax


【解决方案1】:

使用$('#formsubmit').prop('disabled',true);$('#formsubmit').prop('disabled',false); 分别禁用和启用按钮。 jQuery 将处理所有浏览器的差异。

【讨论】:

  • 彼得,是的,没有语法错误。艾伦,我试过了,但它不起作用。该按钮始终保持启用状态。我假设我只是用你的替换了两个 document.getelementbyID 行。我这样做了。我是否需要在顶部放置某种条件禁用?我确实尝试在按钮控件上设置 disabled = "disabled" 但这让它一直处于禁用状态。我应该调用按钮控件上的函数吗?
  • @Bruce,如果除了启用和禁用提交按钮之外的一切都按预期工作,您确定提交按钮的 ID 是“formsubmit”吗?我能想到的就这些了。
  • 一件事,如果您删除success: function(msg) 函数中的额外函数,它可能会起作用,因为它会在请求完成时自动触发。在其中添加另一个函数可能会阻止它执行内部函数中的代码。
猜你喜欢
  • 1970-01-01
  • 2020-03-14
  • 1970-01-01
  • 1970-01-01
  • 2014-07-25
  • 1970-01-01
  • 1970-01-01
  • 2016-04-25
  • 2013-05-21
相关资源
最近更新 更多