Question

For some reason this code works:

$(document).ready(function () {
    var name = document.getElementById('Name').value;
    var email = document.getElementById('Email').value;
    var type = document.getElementById('Type').value;
    var message = document.getElementById('Message').value;
    $.post("send.php", {
        Name: "Matt",
        Email: "[e-mail]",
        Type: "1",
        Message: "GO"
    },

    function (e) {
        alert(e);
    });
});

But this code does not:

$(document).ready(function () {
    $('#btn').click(function () {
        var name = document.getElementById('Name').value;
        var email = document.getElementById('Email').value;
        var type = document.getElementById('Type').value;
        var message = document.getElementById('Message').value;
        $.post("send.php", {
            Name: "Matt",
            Email: "[e-mail]",
            Type: "1",
            Message: "GO"
        },

        function (e) {
            alert(e);
        });
    });
});

Also, I have checked my #btn and the id is correct so its not that. The first code returns successful and the email send. The second one does nothing and I cannot debug it well because the response from the server does not show up in my Chrome Developer Tools Network viewer.

Here is the html form:

<form id="form" action="" method="POST">
                <label for="Name">Name: </label>
                <input type="text" name="Name" id="Name">

                <label for="Email">Email: </label>
                <input type="text" name="Email" id="Email">

                <label for="Type">Type: </label>
                <select name="Type" id="Type">
                    <option value="0">General</option>
                    <option value="1">I need a consultation</option>
                    <option value="2">I need a website</option>
                </select>

                <label for="Message">Message: </label>
                <textarea rows="10" cols="50" name="Message" id="Message"></textarea>
                <br />
                <button id="btn" class="submitBtn">Send</button>
    </form>

Answer 1

Specify the type for the <button> as button.

<button type="button" id="btn" class="submitBtn" >Send</button>

Working example: http://jsfiddle.net/kXeY8/

Some browsers interpret the default type for a <button> in a form with no type attribute specified as submit, causing your form to submit instead, preventing the click event’s ajax request from finishing.