Question

Very early days playing Javascript, Jquery and Validate.

I am using the Submit Button onClick method for form submission.

<input class="submit" type="submit" value="Submit" onClick="submitForm()" />

I am using the submit, in case no data or not every field has been tested.

The logic is working, but the AJAX call does not appear to be working. I have stripped down the PHP to

<?php

touch('phpTouch.txt');
phpinfo();
sleep(30;)
?>

The javascript is

$(document).ready(function () {
    $('#formEnquiry').validate();
});

function submitForm() {
    $('#msgid').append('<h1>Submitting Form (External Routine)</h1>');
    if ($('#formEnquiry').validate().form() ) {
        $("#msgid").append("<h1>(Outside Ready) VALIDATED send to PHP</h1>");
            $.ajax({
            url: "testPHP.php",
            type: "POST",
            data: frmData,
            dataType: "json",
            success: function () {
                alert("SUCCESS:");
            },
            error: function () {
                alert("ERROR: ");
            }
        });
    } else {
        $('#msgid').append('<h1>(Outside Ready) NOT VALIDATED</h1>');
    }
    return false;  // Prevent the default SUBMIT function occurring (is this a fact ??)
};

Can anyone advise as to what I am doing wrong.

Thanks

Answer 1

Do these things

Change onClick="submitForm()" on the HTML markup to onclick="submitForm(event)"
Now change the submitForm function like this.

function submitForm(evt) {
    $('#msgid').append('<h1>Submitting Form (External Routine)</h1>');
    if ($('#formEnquiry').valid() ) {
        $("#msgid").append("<h1>(Outside Ready) VALIDATED send to PHP</h1>");
            $.ajax({
            url: "testPHP.php",
            type: "POST",
            data: frmData,
            contentType: "application/json;",
            success: function () {
                alert("SUCCESS:");
            },
            error: function (a, b, c) {
                alert(a.statusText);
            }
        });
    } else {
        $('#msgid').append('<h1>(Outside Ready) NOT VALIDATED</h1>');
    }
    evt.preventDefault();
};

Please note these things

1. Check .valid() to determine form validity
2. Call .preventDefault() instead of return false; ( Its more jQuery-ish )