CODEWITHSUNDEEP
javascriptjquery
Mesut K
Mesut K

Reputation: 35

jQuery Animation Works But Not Always

I have a form that contains an input with type="image" attribute. I am changing the image everytime whether I get a success or fail call.

But It doesn't work always, I don't see why. Is there any possible way to eliminate setTimeout(function()) or alternative way to implement this animation since this may cause the problem?

HTML

<p class="text-center" style="color:brown" id="input_result">Send</p>
<form data-ajax="false" method="post" name="login_form" role="form">
    <div class="form-group">
        <input type="image" src="images/default.png" class="img-responsive center-block" name="submit" class="submitBtn" id="input_img">
    </div>
</form>

Script

<script>
    $('form').bind('submit', function() {


        $.ajax({
            type: 'POST',
            url: 'includes/sendmail.php',
            data: $(this).serialize(),
            cache: false,
            dataType: 'text',
            success: function(data, status, xhttp) {

                $("#input_img").slideUp(2000).slideDown(1000);
                setTimeout(function() {
                    // Success animation
                    $('#input_img').attr("src", "images/success.png");
                    jQuery("input[type='image']").prop("disabled", true);
                    $('selector').click(false);
                    $("#input_result").text("Sent!");
                    $("#input_result").css("color", "green");
                }, 1999);
                this.submit();
            },
            error: function(jqXHR, textStatus, errorThrown) {

                $("#input_img").slideUp(2000).slideDown(1000);
                setTimeout(function() {
                    // Fail animation
                    $('#input_img').attr("src", "images/fail.png");
                    jQuery("input[type='image']").prop("disabled", true);
                    $('selector').click(false);
                    $("#input_result").text("Failed to send!");
                    $("#input_result").css("color", "red");
                }, 1999);
            },
        });
        return false;
    })
</script>

Upvotes: 0

Views: 58

Answers (2)

Eduardo Molteni
Eduardo Molteni

Reputation: 39413

When you submit the form using this.submit(); the page is submitted to the server and reloaded again, so you lose the success animation. Since you are posting the values in the function, you don't need to submit the form.

Upvotes: 1

Velimir Tchatchevsky
Velimir Tchatchevsky

Reputation: 2815

Instead of $("#input_img").slideUp(2000).slideDown(1000); you can use the callback of slideUp to run your function and then in the end of that function call .slideDown() Like: $("#input_img").slideUp(2000, function(){ $('#input_img').attr("src", "images/fail.png"); jQuery("input[type='image']").prop("disabled", true); $('selector').click(false); $("#input_result").text("Failed to send!"); $("#input_result").css("color", "red"); $("#input_img").slideDown(1000); }

Upvotes: 0

Related Questions