How can I disable a DIV "acting like a submit button" after it is clicked once?

Question

I have a div that is working like a submit button so when a user clicks it it submit a form and it sends a ajax request to the server. The problem that I am having is that if the user click the button twise, the it create duplicate even it is an AJAX request. So What I am trying to do is simply disabling the and re-naming it to, "Please wait..." until the request is completed. to prevent the double submit.

So my question is how to rename and disable "gray out" a div after the click using jQuery?

Thanks

Answer 1

There are a couple approaches you could use:

• Hide your 'submit' div and show a different, 'Please wait...' div in its place

• Set the disabled property on the div when it's clicked, and check for that property in the submit handler

  $("div.submit").click(function(e) {
      if ($(this).prop("disabled"))
          return false;
      // any other error checking, setup etc...
      $(this).prop("disabled", true);
      // submit the request...
  });
  

You could also use a global flag or jQuery's .data() function to mark when the form has been submitted, but I'd recommend the property approach. Once the request has completed, you can then set the disabled property to false, thus allowing the form to be resubmitted later, if desired.

Answer 2

Use one :

$('#mydiv').one('click', function(){ // one : only once
  $.ajax({ ... });// launch your task
  $(this).html('Please wait...') // change the text
     .css('background-color','#444'); // and the background color
});