from the .delay() documentation:

“Only subsequent events in a queue are delayed; for example this will
not delay the no-arguments forms of .show() or .hide() which do not
use the effects queue.”

and probably the .text() is not using the effect queue.

so, .delay() have no affect on .text().

and when you write
$(".submit-button-text").text(data).delay(3000).text(buttonText)

it’s the same as
$(".submit-button-text").text(data).text(buttonText)

and will have no affect on the screen.

please, let me know if this is the problem.
thank you.

I am making an HTML form, which worked fine. Then I wanted to change the submit button’s text according to the response I get after submitting the form (“Form was submitted”/”An error has occurred” etc.).

To do this I needed to store the text within the button (at least, I think I need to), so I could change the button text after few seconds back to “Submit”. However, when I added the buttonText variable, the script stopped working. When I erase (or comment out) the line, the script starts working fine again.

Does anyone have any idea where any bug might be?

<div class="text-center mt-4">
  <button type="submit" class="btn btn-primary" name="submit" value="Submit" id="submit_form">
    <span class="submit-button-text">Submit</span>
  </button>
  <img src="/assets/newsletter/img/loading.gif" class="loading-img">
</div>

$(document).ready(function() {
  $("#contact-form").on("submit", function(e) {
    e.preventDefault();

    if (validateEmail($("#contact-form [name='email']"))) {
      $("#contact-form [name='email']").css("border", "2px solid red");
    } else {
      $("#loading-img").css("display", "block");
      var buttonText = $(".submit-button-text").text(); // adding this causes the issue
      var sendData = $(this).serialize();

      $.ajax({
        type: "POST",
        url: "/assets/newsletter/get_response.php",
        data: sendData,
        success: function(data) {
          $("#loading-img").css("display", "none");
          $(".submit-button-text").text(data).delay(3000).text(buttonText);
        }
      });
    }
  });
});