Отключить 2 кнопки после нажатия кнопки

Question

У меня есть кнопка отправки на странице index.php Когда я нажимаю эту кнопку, другой скрипт (call.php) вызывается через ajax, который содержит некоторый отклик. Теперь я хочу, чтобы это время между нажатием кнопки отправки и ответом, отображаемым/полученным по div через вызов сценария ajax, кнопки option1 и option2 должны быть отключены. и когда успешный результат будет отображаться, две кнопки должны активироваться, однако я не могу этого сделать. может кто-нибудь помочь мне с ней

кнопки

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 btn1 = document.getElementbyId("btn1"); 

Но вам нужно будет установить Id для двух кнопок.

Вы можете отключить их в своем коде отправки, а затем включить их, когда ваш таймер будет выполнен.

Btn1.disabled = true; 

Когда ваш таймер выполнен, установите его как ложный таким же образом.