Omit animation on Form submit

I use the following animate function in a website:


$(document).ready(function() {	
    $(".content").css({"display" : "block"}).animate({left: 0}, 900);
});

That works ok. On the contact page though I use the following (short version) function to validate and process the contact form


function proccess_contact(){
    var reg        = /^([A-Za-z0-9_\\-\\.])+\\@([A-Za-z0-9_\\-\\.])+\\.([A-Za-z]{2,4})$/;
    var naam       = $("#naam").val();
    if(naam == "")
    {
        $("#status").html('<div class="error">Vul uw naam in om verder te gaan.</div>');
        $("#naam").focus();
    }
    else
    {
        var dataString = 'naam='+ naam;
        $.ajax({
            type: "POST",
            url: "modules/process_contact.php",
            data: dataString,
            cache: false,
            beforeSend: function()
            {
                $("#status").html('<div>Please wait...</div><br clear="all">');
            },
            success: function(response)
            {
                $("#status").html($(response).fadeIn(2000));
                $("#contact_form").fadeOut(1000);
                $("#naam").val('');
            }
        });
    }
}

I call the proccess_contact() function with the submit button:

<input name="submit_button" type="submit" value="Verstuur bericht" class="button" onClick="proccess_contact();">

When I press the submit button, the animation is starting all over again. How can I avoid this?

Hi donboe,

Could you post a link to the contact page?

Hi Pullo. This is the link

Hi donboe,

You’ve not got any event listener attached to the form and you haven’t specified any form action, so the form is submitting over and over and every time it submits the animation is occuring.

What you need to do is this:

$("#contact_form").on("submit", function(e){
  e.preventDefault();
  proccess_contact();
});

… or use a click button instead of a submit button.