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

如果没有看到所有代码或网站的工作示例，就很难调试代码。

这些是我的建议（所有必须经过验证才能正常工作）：

将onsubmit="openLoadingModal()"更改为onsubmit="return openLoadingModal()"。这将使表单知道期望openLoadingModal()的返回值。
将enctype="multipart/form-data"添加到表单中，因为您要上传文件。
目前，openLoadingModal()下的所有代码都是非阻塞。这意味着它会在最后一行返回true，无论发生什么。 $.modal和setTimeout()是异步/非阻止方法。尽管名称$.modal令人困惑，但另有说法。只有alert，confirm和prompt等原生Javascript对话框才会出现BLOCKING对话框。您可以考虑使用它们。目前还不是很清楚你想要实现什么，但你可能需要使用进度条实现ajax文件上传，而不是表单和单独的进度条。您也可以尝试将表单发布到隐藏的iframe，然后您将保留在同一页面的上下文中。
确保正确包含jQuery和jQuery UI。
我试图运行你的代码但它不会运行。您可能有其他语法问题阻止您的代码正确执行。

我试图在

希望这有帮助。

Answer 2

在是否应提交表单以代替should_not_submit_form时插入您自己的逻辑。当然，如果您有多个表单，请将正确的选择器放在“表单”的位置。

$("form").on("submit", function(e) {
    if(should_not_submit_form) e.preventDefault();
});

在提交表单之前完成运行javascript

2 个答案: