завершение работы javascript перед отправкой формы

Question

Я хочу закончить запуск javascript перед отправкой моей формы. Моя функция скрипта работает, но он представляет свою форму, даже если сценарий не завершение загрузки своего процент эффекта ..

<form action="<?php echo '../../event_gallery/uploaded/'.$this->uri->segment(3); ?>" onsubmit="openLoadingModal()" method="post"> 
      <input type="file" multiple="" name="images[]"> 
      <button type="submit" id="send" class="button"> 
       <span class="button-icon"><span class="icon-download"></span></span> 
        Upload 
      </button></form> 

моей функцию сценария

function openLoadingModal() 
    { 
     var timeout; 

     $.modal({ 
      contentAlign: 'center', 
      width: 240, 
      title: 'Uploading', 
      content: '<div style="line-height: 25px; padding: 0 0 10px"><span id="modal-status">Uploading Images</span><br><span id="modal-progress">0%</span></div>', 
      buttons: {}, 
      scrolling: false, 
      actions: { 
       'Cancel': { 
        color: 'red', 
        click: function(win) { win.closeModal(); } 
       } 
      }, 
      onOpen: function() 
      { 
        // Progress bar 
       var progress = $('#modal-progress').progress(100, { 
         size: 200, 
         style: 'large', 
         barClasses: ['anthracite-gradient', 'glossy'], 
         stripes: true, 
         darkStripes: false, 
         showValue: false 
        }), 

        // Loading state 
        loaded = 0, 

        // Window 
        win = $(this), 

        // Status text 
        status = $('#modal-status'), 

        // Function to simulate loading 
        simulateLoading = function() 
        { 
         ++loaded; 
         progress.setProgressValue(loaded+'%', true); 
         if (loaded === 100) 
         { 
          progress.hideProgressStripes().changeProgressBarColor('green-gradient'); 
          status.text('Done!'); 
          /*win.getModalContentBlock().message('Content loaded!', { 
           classes: ['green-gradient', 'align-center'], 
           arrow: 'bottom' 
          });*/ 

          setTimeout(function() { win.closeModal(); }, 1500); 

         } 
         else 
         { 
          if (loaded === 1) 
          { 
           status.text('Loading data...'); 
           progress.changeProgressBarColor('blue-gradient'); 
          } 
          else if (loaded === 25) 
          { 
           status.text('Uploading Images (1/3)...'); 
          } 
          else if (loaded === 45) 
          { 
           status.text('Uploading Images (2/3)...'); 
          } 
          else if (loaded === 85) 
          { 
           status.text('Uploading Images (3/3)...'); 
          } 
          else if (loaded === 92) 
          { 
           status.text('Initializing...'); 
          } 
           timeout = setTimeout(simulateLoading, 50); 
         } 
        }; 

       // Start 
       timeout = setTimeout(simulateLoading, 2000); 
      }, 
      onClose: function() 
      { 
       // Stop simulated loading if needed 
       clearTimeout(timeout); 
      } 
     }); 
     return true; 
    }; 

Answer 1

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

Это мои предложения (ALL должны быть проверены для его работы):

1. изменения onsubmit="openLoadingModal()" к onsubmit="return openLoadingModal()". Это позволит форме знать, что ожидается возвращаемое значение от openLoadingModal().

2. Добавь enctype="multipart/form-data" в вашу форму, поскольку вы загружаете файлы.

3. В настоящий момент весь ваш код под openLoadingModal() является NON BLOCKING. Значение возвращает true на последней строке, независимо от того, что на самом деле происходит. $.modal и setTimeout() являются методами Async/Non Blocking. Хотя имя $.modal вводит в заблуждение и подразумевает иное. Только встроенные диалоги Javascript, такие как alert, confirm и prompt, являются диалоговыми окнами BLOCKING. Вместо этого вы можете использовать их. Не совсем понятно, чего вы пытаетесь достичь, но вам может потребоваться реализовать загрузку файла ajax с индикатором выполнения, а не форму и отдельный индикатор выполнения. Вы также можете попытаться отправить форму в скрытый iframe, а затем останетесь в контексте одной и той же страницы.

4. Убедитесь, что вы используете jQuery и jQuery UI правильно.

5. Я попытался запустить ваш код, и он не запускался. Возможно, другие проблемы с синтаксисом не позволяют правильному выполнению кода.

Я попытался запустить свой код на

Надеются, что это помогает.

Answer 2

Вставьте свою собственную логику о том, должна ли форма быть представлена ​​вместо should_not_submit_form. И, конечно, если у вас есть несколько форм, поместите правильный селектор вместо «формы».