Jquery ajax发布以禁用启用字段并获得响应

i have an ajax call that i disable a fields and i then want to enable again once the ajax has finished. How i can re-enable a fields ?

我有一个ajax调用,我禁用一个字段,然后我想再次启用ajax完成后。我如何重新启用字段?

My 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;

});});

result of the code above:

上面代码的结果:

1. clicked submit
2. fields disable
3. display response (loading...)

显示响应(加载......)

4. hidden response
5. fields not enable again

字段不再启用

if i remove line 6-7 and 23-26:

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

1. clicked submit
2. fields disable
3. display response (loading...)

显示响应(加载......)

4. hidden response
5. display response from PHP action

显示PHP操作的响应

6. fields not enable again

字段不再启用

My PHP action

我的PHP动作

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

How i get:

我怎么样:

1. clicked submit
2. fields disable
3. display response (loading...)

显示响应(加载......)

4. hidden response
5. display response from PHP action

显示PHP操作的响应

6. fields enable again

字段再次启用

edit: my demo work http://jsfiddle.net/TkyyC/ but it still doesnt work in my localhost.

编辑:我的演示工作http://jsfiddle.net/TkyyC/但它仍然无法在我的localhost中工作。

edit2: just disable a button

edit2:只需禁用一个按钮

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

.sidebarsignin is class my div inside form and submit-signin is id button thanks for all

.sidebarsignin是class我的div里面的形式和submit-signin是id按钮感谢所有人

4 个解决方案

#1

Use .removeAttr(""). You can remove the disabled attribute to set the input enabled. I created a JSFiddle-Example.

使用.removeAttr(“”)。您可以删除disabled属性以设置启用的输入。我创建了一个JSFiddle-Example。

#2

On send: $("#yourfield").attr("disabled", "disabled");

发送:$(“#yourfield”)。attr(“禁用”,“禁用”);

On success: $("#yourfield").removeAttr("disabled");

成功时:$(“#yourfield”)。removeAttr(“disabled”);

Verify if your ajax call succeeded so the program will execute proper code.

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

#3

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

#4

$.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");
});