Error sending a form via AJAX

Question

I am very new to jQuery and I'm looking for an explanation as to why this code does not seem to work. I think it is something with the "action" not sure. Can someone help me understand my mistake here. thanks

<script src="/jquery.validationEngine.js"></script>
<script>
    $("#contact_body").submit(function(e) {
        e.preventDefault(); // Prevents the page from refreshing

        var $this = $(this); // `this` refers to the current form element

        if ($("#contact_body").validationEngine('validate')) {
            //Post Data to Node Server
            $.post(
                $this.attr("action"), // Gets the URL to sent the post to
                $this.serialize(), // Serializes form data in standard format
                function(data) { /** code to handle response **/ },
                "json" // The format the response should be in
            );

            //Notify User That the Email Was Sent to the Server & Thanks!
            //$('#contactThanksModal').modal('show');
            $('#contactModal').modal('hide');
            alert("success"); 
        }
        else {
            //handle Invalid Email Format Error
            alert("error"); 
        }
    });
</script> 

<!--pop up contact form -->
<div id="contact" class="modal hide fade in" style="display: none;">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">x</a>
        <h3>Send us a message</h3>
    </div>
    <div class="modal-body">

    <form id="contact_body"class="contact_body" name="contact_body" action="/contact">
        <label class="label" for="form_name">Your Name</label><br>
        <input type="text" name="form_name" id="form_name" class="input-xlarge"><br>

        <label class="label" for="form_email">Your E-mail</label><br>
        <input type="form_email" name="form_email" class="input-xlarge"><br>

        <label class="label" for="form_msg">Enter a Message</label><br>
        <textarea name="form_msg" class="input-xlarge"></textarea>
    </form>
</div>

<div class="modal-footer">
    <input class="btn btn-success" type="submit" value="Send!" id="submit">
    <a href="#" class="btn" data-dismiss="modal">Nah.</a>
</div>

<!-- <div id="thanks"><p><a data-toggle="modal" href="#contact" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div> -->

Answer 1

You need to wrap your JQuery scripts in a

$(document).ready(function() {
    ...your_code_here...
});

This will then wait for the whole document to load before trying to attach events to objects.

Without this you may be trying to bind events to objects that have yet to be "created".

Answer 2

You need to put your code in a document ready handler:

<script src="/jquery.validationEngine.js"></script>
<script>
    $(function() {
        $("#contact_body").submit(function(e) {
            // your code...
        });
    });
</script> 

Your code is currently trying to add the submit() handler before the element exists in the DOM.