2013-04-25 110 views
-1

我试图用jQuery表单插件实现表单。该表单有三个文本字段和一个文件输入,我正在验证beforeSend回调中的表单。问题是,无论验证是否通过,处理文件上传的php脚本都被加载到浏览器中,这显然不是我想要发生的 - 我需要留在表单的页面上。浏览器使用jQuery表单插件提交表单后加载php脚本

你可以看看表格,它的依赖文件在http://www.eventidewebdesign.com/public/testUpload/。对该目录进行索引编制,因此您可以查看所有相关文件。表单本身在testUpload.php上。

我很感激,如果有人可以看看我的代码,并帮助我弄清楚这里发生了什么。

回答

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

谢谢,Supriti。那就是诀窍。 – marky 2013-04-25 16:49:22

+0

我对剧本做了一些改变。请删除onsubmit =“返回false;”从 2013-04-25 16:50:33

+1

好的,这样更好:)我在测试之前,将您的回复(添加onsubmit)标记为接受的答案。您对我的脚本的修复工作。谢谢 – marky 2013-04-25 17:03:53