javascript - Disable 2 buttons after click of a button

211

I have a submit button on pageindex.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 type="button" id="submitamt" >Submit</button>
<a href="#popup"><button type="button" id="walkaway" >Option1</button></a>
<a href="#"><button 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>
436

Answer

Solution:

You can achieve this by disabling the buttons before you make the AJAX request, and then enabling them again in thecomplete 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 thecomplete handler and not thesuccess handler. This is because if there is an error the buttons will never be enabled again.

73

Answer

Solution:

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
906

Answer

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

Answer

-- // $('#walkaway, #the_other_button').prop('disabled', false); }, error: function() { console.error('Failed to process ajax !'); } }); };
699

Answer

Solution:

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.

People are also looking for solutions to the problem: The if statement doesn't work for false in php

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.