Question

所以我在JS中有这个功能，发送一个请求将新的状态消息插入数据库。

function DoStatusInsert(){
  var wrapperId = '#statusResponseNow';
    $.ajax({ 
       type: "POST",
       url: "misc/insertStatus.php",
    data: {
    value: 'y',
    uID : $('#uID').val(),
    message : $('#message').val() 
    },
       success: function(msg){
     $('#message').val("");
     $('#statusResponse').toggle(); 
     $(wrapperId).prepend(msg);
     $(wrapperId).children().first().fadeIn('slow');
        }
     });
}

使用此表格：

<input name="message" type="text" id="message" value="" size="60">  
<input type="hidden" name="uID" id="uID" value="<?php echo $v["id"]; ?>">
<input name="submit" type="submit" id="submit" value="Spara">
<div id="statusResponseNow"></div>

现在我想做一些事情，比如阻止提交按钮或消息字段为“只读”，直到你收到回应/成功，所以你没有机会喜欢按提交很多次，所以它插入了很多..（我知道你可以在数据库中加倍检查后制作一个php）

所以：当你点击提交时，它会将消息字段和/或提交按钮设为只读

我该怎么做？

Answer 1

function DoStatusInsert(){
  $('#IdOfYourSaveButton').attr('disabled', 'disabled');
  var wrapperId = '#statusResponseNow';
    $.ajax({ 
       type: "POST",
       url: "misc/insertStatus.php",
       data: {
       value: 'y',
       uID : $('#uID').val(),
       message : $('#message').val(),
       success: function(msg){
          $('#IdOfYourSavebutton').removeAttr('disabled');
          $('#message').val("");
          $('#statusResponse').toggle(); 
          $(wrapperId).prepend(msg);
          $(wrapperId).children().first().fadeIn('slow');
        }
  });
}

启用并禁用该按钮。好又容易：）

Answer 2

在调用该函数时，设置该按钮的disabled属性，然后将其设置为成功。

function DoStatusInsert(){
 $('#submit').attr("disabled", "true");

 var wrapperId = '#statusResponseNow';
    $.ajax({ 
       type: "POST",
       url: "misc/insertStatus.php",
    data: {
    value: 'y',
    uID : $('#uID').val(),
    message : $('#message').val() 
    },
       success: function(msg){
         $('#message').val("");
         $('#statusResponse').toggle(); 
         $(wrapperId).prepend(msg);
         $(wrapperId).children().first().fadeIn('slow');
         $('#submit').attr("disabled", "false");
        }
     });
}

Answer 3

我最初的想法是插入

$（'input [type = submit]'，this）.attr（'disabled'，'disabled'）;

在启动ajax调用之前，然后使用ajax请求的success函数删除disabled属性。

Answer 4

手动切换按钮的禁用状态效果很好，但jQuery有几个辅助事件可以使它更好一些：.ajaxStart()和.ajaxStop()。您可以在提交按钮上使用这两个处理程序，而不必担心在$ .ajax（）请求周围维护该手动代码。

将其与其他初始化代码一起放入，可能在$（document）.ready（）：

中

$('#submit').ajaxStart(function() { this.disabled = true; });

$('#submit').ajaxStop(function() { this.disabled = false; });

Answer 5

您可以使用http://jquery.malsup.com/block/中的jQuery BlockUI插件（请参阅http://jquery.malsup.com/block/#element和http://jquery.malsup.com/block/#demos上的演示）。

如果您需要屏蔽的所有表单元素的div都标识为formDiv，那么您可以调用

jQuery('#formDiv').block({ message: '<h1>Just a moment...</h1>' });

在jQuery.ajax之前

并致电

jQuery('#formDiv').unblock();

作为success的{{1}}和error处理程序的第一行。

jQuery：当ajax请求块元素时

5 个答案: