單擊按鈕後禁用2個按鈕

Question

我有頁面index.php上的提交按鈕當我單擊此按鈕時，通過ajax調用另一個腳本(call.php)，該腳本包含一些響應。現在我希望通過ajax腳本的調用，點擊提交按鈕和在div下顯示/接收的響應之間的時間，應該禁用按鈕選項1和選項2。當成功顯示結果時，2個按鈕應該啓用，但是我無法這樣做。誰能幫助我與它

3個按鈕和腳本代碼index.php頁面上

<button class="rightbtn" type="button" id="submitamt" style="display:none; ">Submit</button> 
<a href="#popup"><button class="botleftbtn" type="button" id="walkaway" style="display:none">Option1</button></a> 
<a href="#"><button class="botrightbtn" type="button">Option2</button></a> 


<script> 
function myFunction() { 
    alert("You need to login before negotiating! However you can purchase the product without negotiating"); 
} 
var startClock; 
var submitamt; 
var walkaway; 
var digits; 

$(function() { 
    startClock = $('#startClock').on('click', onStart); 
    submitamt = $('#submitamt').on('click', onSubmit); 
    walkaway = $('#walkaway').on('click', onWalkAway); 
    digits = $('#count span'); 
    beforeStart(); 
}); 

var onStart = function(e) { 
    startClock.fadeOut(function() { 
    startTimer(); 
    submitamt.fadeIn(function() { 
     submitamt.trigger('click'); // fire click event on submit 
    }); 
    walkaway.fadeIn(); 
    }); 
}; 

var onSubmit = function(e) { 
    var txtbox = $('#txt').val(); 
    var hiddenTxt = $('#hidden').val(); 
    $.ajax({ 
    type: 'post', 
    url: 'call.php', 
    dataType: 'json', 
    data: { 
     txt: txtbox, 
     hidden: hiddenTxt 
    }, 
    cache: false, 
    success: function(returndata) { 
    $('#proddisplay').html(returndata); 
    }, 
    error: function() { 
     console.error('Failed to process ajax !'); 
    } 
    }); 
}; 

var onWalkAway = function(e) { 
    //console.log('onWalkAway ...'); 
}; 

var counter; 
var timer; 
var startTimer = function() { 
    counter = 120; 
    timer = null; 
    timer = setInterval(ticker, 1000); 
}; 

var beforeStart = function() { 
    digits.eq(0).text('2'); 
    digits.eq(2).text('0'); 
    digits.eq(3).text('0'); 
}; 

var ticker = function() { 
    counter--; 
    var t = (counter/60) | 0; // it is round off 
    digits.eq(0).text(t); 
    t = ((counter % 60)/10) | 0; 
    digits.eq(2).text(t); 
    t = (counter % 60) % 10; 
    digits.eq(3).text(t); 
    if (!counter) { 
    clearInterval(timer); 
    alert('Time out !'); 
    resetView(); 
    } 
}; 

var resetView = function() { 
    walkaway.fadeOut(); 
    submitamt.fadeOut(function() { 
    beforeStart(); 
    startClock.fadeIn(); 
    }); 
}; 
</script> 

Answer 1

您可以通過禁用按鈕您做出AJAX請求之前實現這一目標，然後在再次使他們complete請求的處理程序。試試這個：

var onSubmit = function(e) { 
    var txtbox = $('#txt').val(); 
    var hiddenTxt = $('#hidden').val(); 
    $('.botleftbtn, .botrightbtn').prop('disabled', true); // < disable the buttons 

    $.ajax({ 
     type: 'post', 
     url: 'call.php', 
     dataType: 'json', 
     data: { 
      txt: txtbox, 
      hidden: hiddenTxt 
     }, 
     cache: false, 
     success: function(returndata) { 
      $('#proddisplay').html(returndata); 
     }, 
     error: function() { 
      console.error('Failed to process ajax !'); 
     }, 
     complete: function() { 
      $('.botleftbtn, .botrightbtn').prop('disabled', false); // < enable the buttons 
     } 
    }); 
}; 

注意，盡力使按鍵在complete處理程序，而不是success處理程序。這是因爲如果出現錯誤，按鈕將永遠不會再次啓用。

Answer 2

禁用上點擊按鈕，並在阿賈克斯的成功使他們：

var onSubmit = function(e) { 
    var txtbox = $('#txt').val(); 
    var hiddenTxt = $('#hidden').val(); 

    //Disable buttons ---------------------- // 
    //Give an id to the second button 
    $('#walkaway, #the_other_button').prop('disabled', true); 

    $.ajax({ 
    type: 'post', 
    url: 'call.php', 
    dataType: 'json', 
    data: { 
     txt: txtbox, 
     hidden: hiddenTxt 
    }, 
    cache: false, 
    success: function(returndata) { 
     $('#proddisplay').html(returndata); 
     //Enable buttons ---------------------- // 
     $('#walkaway, #the_other_button').prop('disabled', false); 
    }, 
    error: function() { 
     console.error('Failed to process ajax !'); 
    } 
    }); 
}; 

Answer 3

在你的onsubmit（）代碼，獲得VAR參考要停用

Var btn1 = document.getElementbyId("btn1"); 

的按鈕，但你將不得不爲兩個按鈕設置一個ID。

您可以在提交代碼中禁用這些代碼，然後在您的計時器完成時啓用它們。

Btn1.disabled = true; 

當您的計時器完成後，將其設置爲false的方式相同。