Browser loading php script after submitting form using jQuery Form plugin

Question

I'm trying to implement a form using the jQuery Form plugin. The form has three text fields and a file input and I am validating the form in the beforeSend callback. The problem is, whether the validation passes or not, the php script that handles the file upload gets loaded in the browser, which, obviously is not what I want to happen - I need to stay on the form's page.

You can take a look at the form and it's dependent files at http://www.eventidewebdesign.com/public/testUpload/. Indexing is on for that directory, so you can take a look at all of the related files. The form itself is on testUpload.php.

I'd appreciate it if someone could take a look at my code and help me figure out what's going on here.

Answer 1

Please write the following script instead of your, this will work.

<script>
            $(document).ready( function() {
                // Initialize and populate the datepicker
                $('#sermonDate').datepicker();
                var currentDate = new Date();
                $("#sermonDate").datepicker('setDate',currentDate);
                $("#sermonDate").datepicker('option',{ dateFormat: 'mm/dd/yy' });

                /*
                 * Upload
                 */
                // Reset validation and progress elements
                var formValid = true,
                    percentVal = '0%';
                $('#uploadedFile, #sermonTitle, #speakerName, #sermonDate').removeClass('error');
                $('#status, #required').empty().removeClass();
                $('.statusBar').width(percentVal)
                $('.percent').html(percentVal);

                $('#frmSermonUpload').ajaxForm({
                    beforeSend: function() {

                        if (!ValidateUploadForm()) {
                            formValid = false;
                            console.log('validateuploadform returned false');
                        } else {
                            console.log('validateuploadform returned true');
                            formValid = true;
                        }

                        console.log('in beforeSend. formValid: ' + formValid);

                        if (!formValid) {
                            $('#uploadedFile').val('');
                            return false;
                        }

                    },
                    uploadProgress: function(event, position, total, percentComplete) {
                        console.log('in uploadProgress function. formValid: ' + formValid);
                        if (formValid) {
                            var percentVal = percentComplete + '%';
                            $('.statusBar').width(percentVal)
                            $('.percent').html(percentVal); 
                        }
                    },
                    complete: function(xhr) {
                        console.log('in complete function. formValid: ' + formValid);
                        if (formValid) {
                            console.log('xhr.responseText: ' + xhr.responseText);
                            console.log('formValid: ' + formValid);

                            if (xhr.responseText === 'success') {
                                $('.statusBar').width('100%');
                                $('.percent').html('100%');
                                $('#status').html('Successfully uploaded the sermon.').addClass('successUpload');

                                // Clear the form
                                ClearForm();

                            } else if (xhr.responseText === 'fail') {
                                $('#status').html('There was a problem uploading the file. Try again.<br>If the problem persists, contact your system administrator.').addClass('errorUpload');
                            }
                        }
                    }
                }); // End Upload Status Bar
            });

            function ValidateUploadForm() {
                // Reset errors and clear message
                $('#uploadedFile, #sermonTitle, #speakerName, #sermonDate').removeClass('error');
                $('#required').empty();

                var result = true;
                    title = $('#sermonTitle').val(),
                    speaker = $('#speakerName').val(),
                    date = $('#sermonDate').val(),
                    fileName = $('#uploadedFile').val();
                    extension = $('#uploadedFile').val().split('.').pop().toLowerCase();

                //if (fileName !== '' && extension !== 'mp3') {
                if ((fileName === '') || (extension !== 'mp3')) {
                    $('#uploadedFile').addClass('error');
                    $('#required').html('Only mp3 files are allowed!');
                    return false;
                } else if (fileName === '') {
                    result = false;
                } else if (title === '') {
                    $('#sermonTitle').addClass('error');
                    result = false;
                } else if (speaker === '') {
                    $('#speakerName').addClass('error');
                    result = false;
                } else if (date === '') {
                    $('#sermonDate').addClass('error');
                    result = false;
                }

                console.log('returning ' + result + ' from the validateuploadform function');

                if (!result) { $('#required').html('All fields are required.'); }
                return result;
            }

            function ClearForm() {
                $('#uploadedFile, #sermonTitle, #sermonDate, #speakerName').val('').removeClass();
            }

        </script>