Jquery ajax post禁用启用字段并获取响应

Jquery ajax post to disable enable fields and get response

本文关键字：字段 获取 响应 启用 ajax post Jquery      更新时间：2023-12-08

我有一个ajax调用，我禁用了一个字段，然后我想在ajax完成后再次启用。如何重新启用字段？

我的jquery

$(document).ready(function(){
$('#form-signin').submit(function(){
    $( "#response" ).fadeIn( "slow" );
    $('#response').html("<div class='message loading-response'>Loading...</div>");
    var $inputs = $(this).find("input, select, button, textarea"); //line 6
    $inputs.prop("disabled", true); //line 7
    var request = $.ajax({
        type: 'POST',
        url: 'form.php', 
        data: $(this).serialize()
    })
    .done(function(data){
        $('#response').html(data);
    })
    .fail(function() {
        alert( "Submit failed." );
        $('#response').html("<div class='message loading-response'>Submit failed.</div>");
    });
    request.always(function () { //line 23
            // reenable the inputs line 24
            $inputs.prop("disabled", false); //line 25
        }); //line 26
    return false;
});});

上面代码的结果：

  1. 单击提交
  2. 字段禁用
  3. 显示响应（正在加载…）
  4. 隐藏响应
  5. 字段未再次启用

如果我删除第6-7行和第23-26行：

  1. 单击提交
  2. 字段禁用
  3. 显示响应（正在加载…）
  4. 隐藏响应
  5. 显示PHP操作的响应
  6. 字段未再次启用

我的PHP操作

<script>$('#response').html('<div class=''message error''>Error login username <?php echo $_POST['username-signin']; ?></div>');</script>

如何获取：

  1. 单击提交
  2. 字段禁用
  3. 显示响应（正在加载…）
  4. 隐藏响应
  5. 显示PHP操作的响应
  6. 字段再次启用

编辑：我的演示作品http://jsfiddle.net/TkyyC/但它在我的本地主机上仍然不起作用。

第2版：只需禁用按钮

$('.sidebarsignin #submit-signin').attr('disabled','disabled');

.sidebarsignin在form和submit signin is id按钮感谢所有

使用.removeAttr("")。您可以删除disabled属性以将输入设置为启用状态。我创建了一个JSFiddle示例。

发送时：$（"#yourfield"）.attr（"disabled"，"disabled）；

关于成功：$（"#yourfield"）.removeAttr（"已禁用"）；

验证您的ajax调用是否成功，以便程序执行正确的代码。

.done(function(data){
        $('#response').html(data);
        $("#inputID").removeAttr("disabled");
    })

$.ajax({
type: 'POST',
url: 'form.php', 
data: $(this).serialize(),
beforeSend: function(){
$inputs.prop("disabled", true);
},
})
.done(function(data){
$('#response').html(data);
$("input, select, button, textarea").removeAttr("disabled");
});
相关文章：