finish running javascript before submitting form

Question

I want to finish running my javascript before submitting my form. My script function is running but it submits my form even if the script has not finish loading its percentage effect..

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

my function script

    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

It's hard to debug your code without seeing all of it or a working example of your site.

These are my suggestions (ALL must be verified for it to work):

1. change onsubmit="openLoadingModal()" to onsubmit="return openLoadingModal()" . This will let the form know to expect a return value from openLoadingModal() .

2. Add enctype="multipart/form-data" to your form, since you are uploading files.

3. Currently, all your code under openLoadingModal() is NON BLOCKING . Meaning it returns true at the last line, no matter what really happens. $.modal and setTimeout() are Async/Non Blocking methods. Even though the name $.modal is confusing and implies otherwise. Only native Javascript dialogs such as alert , confirm and prompt are BLOCKING dialogs. You may consider using them instead. It's not very clear what you are trying to achieve, but you may need to implement an ajax file upload with progress bar and not a form and a separate progress bar. You can also try to post the form to a hidden iframe and then you'll stay in the context of the same page.

4. Make sure you are including jQuery and jQuery UI correctly.

5. I tried to run your code and it wouldn't run. You could have other syntax problems are preventing your code to execute correctly.

I tried to run your code on

Hope this helps.

Answer 2

Insert your own logic on whether the form should be submitted in place of should_not_submit_form. And of course if you have multiple forms, place the correct selector in place of "form".

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