jQuery: text and disable it when clicked

Question

I want to show the text of a button and disable it once it has been clicked.

<button id="btnResendVerificationEmail" class="btn btn-success">click text</button>

<script type="text/javascript">
  jQuery('#btnResendVerificationEmail').click(function() {
    jQuery.post('clientarea.php', {
      'token': '{$token}',
      'action': 'resendVerificationEmail'
    }).done(function(data) {
      jQuery('#btnResendVerificationEmail').prop('disabled', true).text('done text');
    });
  });
</script>

"show text and disabled" works. But it is never called. You have a problem with your jQuery post — Janneck Lange, Apr 01 '20 at 23:40
Check out this answer, it can help you: https://stackoverflow.com/a/5004276/8820742 — Janneck Lange, Apr 01 '20 at 23:42
I know shows text and disabled when done , I want show also when click another text — Saeed ', Apr 02 '20 at 00:12
@Saeed' please clarify your issue or question. The posted code appears to work as expected. — Twisty, Apr 02 '20 at 01:25
@Twisty Now code working (click >> waiting called >> show text done and disabled) I want to working like this ( click >> show waiting text and disabled >> after called show text done and disabled) — Saeed ', Apr 02 '20 at 02:38
@Saeed' So you want when the User clicks the button, the HTTP Post starts; text to indicate that the script is loading something; "done" is triggered; and then change text to indicate it is done. Is this correct? — Twisty, Apr 02 '20 at 05:39
@Twisty It works as I requested but the verification email is not sent. — Saeed ', Apr 02 '20 at 06:51
@Saeed' that would be entirely outside the scope of this question. I would investigate further, check logs, enable debugging, and if needed post a new PHP question. — Twisty, Apr 02 '20 at 06:54
@Twisty Old code The message is sent successfully. The new code does not send the message, but text appears as I want — Saeed ', Apr 02 '20 at 07:05

score 0 · Answer 1 · answered Apr 02 '20 at 06:24

Consider using jQuery.ajax() where you can make use of beforeSend callback. This allows you to modify the Button before the HTTP Post. Then you can modify it again in success callback.

jQuery(function($) {

  var int;
  var c = 0;

  function showLoading(obj) {
    int = setInterval(function() {
      var t = "Load";
      switch (c % 3) {
        case 0:
          t += "...";
          break;
        case 1:
          t += "..";
          break;
        case 2:
          t += ".";
          break;
      }
      c++;
      obj.html(t);
    }, 200);
  }

  $('#btnResendVerificationEmail').click(function() {
    $.ajax({
      url: "https://reqres.in/api/users",
      data: {
        token: "token-1234",
        action: "resendVerficiationEmail"
      },
      method: "POST",
      beforeSend: function() {
        $('#btnResendVerificationEmail').prop("disabled", true);
        showLoading($('#btnResendVerificationEmail'));
      },
      success: function(data) {
        clearInterval(int);
        $('#btnResendVerificationEmail').html("Done");
        console.log(data);
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnResendVerificationEmail" class="btn btn-success">Send</button>

Read More: https://api.jquery.com/jquery.ajax/

Old code The message is sent successfully. The new code does not send the message, but text appears as I want — Saeed ', Apr 02 '20 at 08:47

jQuery: text and disable it when clicked

1 Answers1