CODEWITHSUNDEEP
cssjqueryinternet-explorer-8
sandy
sandy

Reputation: 1155

Disable the button after clicking the button once IE8 issue

I want to disable submit button once it is clicked..Let me explain it as below

  1. On form submission validation is done using ajax call and submit button is disabled using .attr("disabled",true);

  2. If response is 'Fail' (i.e. validation fails) button is clickable again using .attr("disabled",false) in ajax response

This work absolutely fine in FF and chrome but in IE8 whenever button is pressed, effect of being enable to disable is visible (button is normal when clicked, visible like disabled). don't want this momentarily change in appearance on IE8.

I even tried some suggestion like using .attr("disabled","disabled"); and .removeAttr("disabled"); to make it disable and enable. Code snippets:- 

$("#submitBtn").click(function(event) {
    event.preventDefault();
    $("#submitBtn").attr('disabled',true);
    dataToPost = $("#Form").serialize();
    $.ajax({
        type: "POST",
        url: 'FormValidation',
        data: dataToPost ,
        success: function(response){
            if(response.status=='FAIL')
            {
                $("#submitBtn").attr('disabled',false);
                 //Some code
          }
             else{
        /* submit the form to if validation is successful */
                saveData(dataToPost);
            }

Upvotes: 0

Views: 822

Answers (2)

sandy
sandy

Reputation: 1155

Unfortuntely if you use the disabled attribute, no matter what you try IE will just default the colour of the text to grey, with a wierd white shadow...thing... yet all other styles will still work. :-/ as answered here.

Upvotes: 1

Stuart Burrows
Stuart Burrows

Reputation: 10814

Instead of disabling the button, why not prevent the click behaviour? One way to do that would be to do something like:

var waitingForAjax = false;

$('yourButton').click(function(e){
    if (waitingForAjax) {
        return false;
    }

    waitingForAjax = true;
    // ajax call
});

then on ajax fail set waitingForAjax to false again.

Upvotes: 2

Related Questions