CODEWITHSUNDEEP
javascriptjquery
NoWar
NoWar

Reputation: 37633

Disable Cancel button before POST

On clicking Submit button my JavaScript code execute $.post("Submit.aspx",... that sometimes takes a few seconds so user is able to click Back button that is undesirable.

So I try to disable or hide Back button but it does not work and it is still clickable. Any clue?

<input type="submit" value="Submit" class="next" onclick="submitData()" />
<input type="submit" id="btnBack" value="Back" onclick="goBack()" />

function submitData()
{
   // I try to disable or hide Back button but it does not work 
  $('#btnBack').hide();
  $('#btnBack').attr("disabled",true);
  var btnBack= document.getElementById("btnBack").disabled = true;


   // Long request
   $.post("Submit.aspx",..
}

Upvotes: 0

Views: 571

Answers (5)

Lawrence
Lawrence

Reputation: 1

I had two button with the same name and that confuses jQuery it cannot execute the hide() method when it was invoked. in the course of researching to know what was happening, I came across this post with the comments of AlexandrX which gave a clue to what may be causing the problem. I removed the duplicate cancelButton and everything works well. This is of great help.

Thank you so much.

Upvotes: 0

itzmukeshy7
itzmukeshy7

Reputation: 2677

Try this ;)

canSubmit = true;
function submitData(){
    if(!canSubmit){
         return false;
    }
    canSubmit = false;

    // disabling button
    $('#btnBack').attr("disabled", true);

     // Long request
     $.post("Submit.aspx", ...).always(function(){ canSubmit = true; });
}

Simply use a variable and check for this value before submitting form and after ajax request response reset it value. BTW you can disable button if you want to do so.

Upvotes: 1

Aniket Sahrawat
Aniket Sahrawat

Reputation: 12937

You should use $(el).prop() for disabling the input. Also when you are using jQuery, you don't need to add onclick in html, you can do it like Eg below:

$('input[value="Submit"]').on('click', function(e) {
  $('#btnBack').prop("disabled",true);
   //your post request
   //$.post("Submit.aspx",..
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" value="Submit" class="next" />
<input type="submit" id="btnBack" value="Back" onclick="goBack()" />

For your code it will be:

function submitData() {
    $('#btnBack').prop("disabled",true);
    $.post("Submit.aspx",..
}

Upvotes: 3

imazzara
imazzara

Reputation: 430

Your code seems to be right. Did you add Jquery?

Check the this:

function submitData(){
   // I try to disable or hide Back button but it does not work 
  $('#btnBack').hide();
  $('#btnBack').attr("disabled",true);
  var btnBack= document.getElementById("btnBack").disabled = true;

}

function goBack(){
  console.log("I'm back");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" value="Submit" class="next" onclick="submitData()" />
<input type="submit" id="btnBack" value="Back" onclick="goBack()" />

Upvotes: 1

Dan.
Dan.

Reputation: 717

$("#btnBack").prop('disabled', true);

Instead of 

$('#btnBack').attr("disabled",true);

Upvotes: 0

Related Questions