Disable 2 buttons after click of a button

Question

I have a submit button on page index.php When i click this button another script (call.php) is called through ajax that holds some response. Now i want that time between the click of submit button and response displayed/received under a div through the call of ajax script the buttons option1 and option2 should get disabled. and when succesfully the result is dispalyed the 2 buttons should get enabled, however i am not able to do so. can anyone help me with it

3 buttons and script code on index.php page is

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

Rory McCrossan · Accepted Answer · 2015-06-23 06:51:29Z

You can achieve this by disabling the buttons before you make the AJAX request, and then enabling them again in the complete handler of the request. Try this:

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
        }
    });
};

Note that its best to enable the buttons in the complete handler and not the success handler. This is because if there is an error the buttons will never be enabled again.

kapantzak · Accepted Answer · 2015-06-23 06:54:29Z

0

Disable the buttons on click, and enable them on ajax success:

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 !');
    }
  });
};

edited Jun 23, 2015 at 6:54

answered Jun 23, 2015 at 6:51

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

Comments

Buildersrejected · Accepted Answer · 2015-06-23 06:58:23Z

0

In your onsubmit() code, get a var reference to the buttons you wish to deactivate

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

But you would have to set an Id for the two buttons.

You can disable these in your submit code and then enable them when your timer is done.

Btn1.disabled = true;

When your timer is done, set it as false the same way.

answered Jun 23, 2015 at 6:58

Buildersrejected

1678 bronze badges

Collectives™ on Stack Overflow

Disable 2 buttons after click of a button

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related