jQuery: текст и отключить его при нажатии

Question

Я хочу показать текст кнопки и отключить ее после нажатия.

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

Answer 1

Рассмотрите возможность использования jQuery.ajax(), где вы можете использовать beforeSend обратный вызов. Это позволяет изменить кнопку перед публикацией HTTP. Затем вы можете изменить его снова в success обратном вызове.

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>

Подробнее: https://api.jquery.com/jquery.ajax/