Solution 1 :

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

it’s the same as

and will have no affect on the screen.

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

Problem :

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>
  <img src="/assets/newsletter/img/loading.gif" class="loading-img">
$(document).ready(function() {
  $("#contact-form").on("submit", function(e) {

    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();

        type: "POST",
        url: "/assets/newsletter/get_response.php",
        data: sendData,
        success: function(data) {
          $("#loading-img").css("display", "none");


Comment posted by Niet the Dark Absol

Any errors in the console?

Comment posted by lukas rajnoha

Only this one: Uncaught ReferenceError: Headroom is not defined

Comment posted by Nguyễn Văn Phong

Why don’t you give us the code related to

Comment posted by Rory McCrossan

Firstly, that line alone won’t be causing the problem. Secondly, changing a button’s text to display an error is a rather odd thing to do. Button labels should always show the action the button will perform, regardless of the pages state.

Comment posted by SPlatten

You haven’t posted enough to validate your script, in your script you are referencing Id’s and names that do not appear in your HTML. Also you do no validation that the responses are correct and return valid elements. # is not valid for a class reference in JQuery, #loading_img should be .loading_img Surround your script in a try { } catch {} then echo out the caught error.