Браузер загружает скрипт php после отправки формы с помощью плагина jQuery Form

Question

Я пытаюсь реализовать форму с помощью плагина jQuery Form. Форма имеет три текстовых поля и файл ввода, и я проверяю форму в обратном вызове beforeSend. Проблема в том, проходит ли валидация или нет, php-скрипт, который обрабатывает загрузку файлов, загружается в браузер, что, очевидно, не то, чего я хочу, - мне нужно оставаться на странице формы.

Вы можете взглянуть на форму и ее зависимые файлы по адресу http://www.eventidewebdesign.com/public/testUpload/. Индексирование для этого каталога включено, поэтому вы можете просмотреть все связанные файлы. Сама форма находится на testUpload.php.

Я был бы признателен, если бы кто-нибудь взглянул на мой код и помог мне понять, что здесь происходит.

Answer 1

Пожалуйста, напишите следующий скрипт вместо вашего, это будет работать.

<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>