jQuery & AJAX form - on submitting, change button text and hide error message

Question

I have a form that submits via AJAX to the server, and what I have been trying to do is get the submit button text to change to read "Submitting..." and to hide the validation error message (if one appeared while the user was filling out the form).

I feel like this should be working but it doesn't. It seems that the button text and error message are only affected after the form has been submitted. I would only like the button text and error message to be affected during the submission process after successful validation has been confirmed in the AJAX method.

I feel like I'm missing something super obvious and simple but I'm totally confused.

The code:

;(function ($) {
    $(document).ready(function () {
        var FirstName = $('.FirstNameTxt');
        var LastName = $('.LastNameTxt');
        var EmailAddress = $('.EmailTxt');
        var Company = $('.CompanyTxt');
        var successMessage = $('.success');
        var error = $('.errors-container');
        var sharpSpringID = $('#gatewayEmbedID').val();

        function validateForm() {
            var required = [FirstName, LastName , EmailAddress, Company];
            var containsErrors = false;

            for (i = 0; i < required.length; i++) {
                var input = required[i];
                if ((input.val() == "")) {
                    containsErrors = true;
                    input.addClass('error-field');
                    error.show();
                } else {
                    input.removeClass('error-field');
                }
            }
            return !containsErrors;
        }
        $('.button-submit').click(function(e) {
            var isValid = validateForm();
            if (isValid) {
                postForm();
            }
        });

        function postForm() {
            var formData = {
                firstname: FirstName.val(),
                lastname: LastName.val(),
                useremail: EmailAddress.val(),
                company: Company.val()
            };

            $.ajax({
                type: "POST",
                url: "/home/submitForm",
                data: formData,
                dataType: "json",
            }).done(function (response) {
                for (var i = 0; i < response.length; i++) {
                    var status = response[i].status;
                    if (status == "error") {
                       if (response[i].field == "email") {
                            error.show();
                            EmailAddress.addClass("error-field");
                       }
                    }
                    else if (status == "success") {
                        //I would like to change the button text and hide the error message here
                        $('.button-submit').html("Submitting....");
                        error.hide();
                        $('#browserHangForm')[0].reset();
                        $('.form-field-content').hide();
                        successMessage.show();
                    }
                }
            });
        }
    });
}(jQuery));

The form itself:

<div class="slider register-photo">
 <div class="form-inner">
        <div class="form-container">
            <form method="post" enctype="multipart/form-data" id="browserHangForm">
                <a class="sidebar">
                    <span class="glyphicon glyphicon-arrow-left icon-arrow arrow"></span>
                </a>
                <a class="closeBtn">
                    <span class="glyphicon glyphicon-remove"></span>
                </a>

                <h2 class="text-center black">Header text goes here
                </h2>

                <p class="light">-- lorem ipsum --</p>

                <p class="errors-container light">Please fill in the required fields.</p>

                <div class="success">Thank you for your submission!</div>
                <div class="form-field-content">
                    <div class="form-group">
                        <input class="form-control FirstNameTxt" type="text" name="first_name" placeholder="*First Name"
                               autofocus="">
                    </div>
                    <div class="form-group">
                        <input class="form-control LastNameTxt" type="text" name="last_name" placeholder="*Last Name"
                               autofocus="">
                    </div>
                    <div class="form-group">
                        <input class="form-control EmailTxt" type="email" name="Email" placeholder="*Email"
                               autofocus="">
                    </div>
                    <div class="form-group">
                        <input class="form-control CompanyTxt" type="text" name="Company" placeholder="*Company"
                               autofocus="">
                    </div>
                    <div class="form-group submit-button">
                        <button class="btn btn-primary btn-block button-submit" type="button">Submit</button>
                    </div>
                </div>
                <br/>
            </form>
        </div>
    </div>
</div>

Answer 1

You do it in .done(), so this is after the Ajax has completed.

I suggest this :

$('.button-submit').click(function(e) {
    var isValid = validateForm();
    if (isValid) {
      $(".errors-container").hide();
      $(this).html("Submitting...");
      postForm();
    }
});

And in the .done(), set another value to the button, like:

$(".button-submit").html("Submitted successfully.")

Answer 2

Use beforeSend:function(){$('.button-submit').html("Submitting....");} in ajax parameter and and on success call back use this statement $('.button-submit').html("Submitted");. check below code

        function postForm() {
            var formData = {
                firstname: FirstName.val(),
                lastname: LastName.val(),
                useremail: EmailAddress.val(),
                company: Company.val()
            };

            $.ajax({
                type: "POST",
                url: "/home/submitForm",
                data: formData,
                dataType: "json",
                beforeSend:function(){
                   $('.button-submit').html("Submitting....");
                }
            }).done(function (response) {
                for (var i = 0; i < response.length; i++) {
                    var status = response[i].status;
                    if (status == "error") {
                       if (response[i].field == "email") {
                            error.show();
                            EmailAddress.addClass("error-field");
                       }
                    }
                    else if (status == "success") {
                        //I would like to change the button text and hide the error message here
                        
                        error.hide();
                        $('#browserHangForm')[0].reset();
                        $('.form-field-content').hide();
                        successMessage.show();
                        $('.button-submit').html("Submitted");
                    }
                }
            });
        }