Question

我在页面index.php上有一个提交按钮当我单击此按钮时，另一个脚本(call.php)通过ajax调用，该脚本包含一些响应。现在我希望在点击提交按钮和通过调用ajax脚本在div下显示/接收的响应之间的时间，按钮option1和option2应该被禁用。当成功显示结果时，2个按钮应该启用，但是我无法这样做。任何人都可以帮助我吗

index.php页面上的3个按钮和脚本代码是

<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

单击时禁用按钮，并在ajax成功时启用它们：

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;

当你的计时器完成后，以相同的方式将其设置为假。

单击按钮后禁用2个按钮

3 个答案: