AJAX Progress Bar

by Manuel Rojas

HTML

<div id="progressMessage" style="display:none; padding:5px; border:1px Solid #000">
        <div id="activityIndicator">&nbsp;</div>
        <label style="font:bold; display:block; padding:5px; text-align: centre;"
             id="progressMessageLbl">Loading...</label>
    </div>
<form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple="multiple" accept="*">
    <input type="submit" value="Ανέβασμα Αρχείων" onclick="showProgressCursor();">
</form>

<form action="execute.php" method="post" >
    <input type="submit" value="Εκτέλεση ελέγχου" onclick="showProgressCursor();">

</form>

JavaScript

$(document).ready(function(){
        // Initialize submitted with false
        var submitted = false;
        var form=$("#ratings");
        $("#submit_form").click(function(){
            $("#display").html("Processing....");
            // Form is submitted.
            if(!submitted)
            {
                // Submitting the form using ajax.
                $.ajax({
                    type:"POST",
                    url:form.attr("action"),
                    data:$("#ratings input").serialize(),//only input
                    success: function(response, status){
                        if(status=="success")
                        {
                            submitted = false;
                            $("#display").html("Submitted");
                        }
                    }
                });
            }
            // On first click submitted will be change to true.
            // On the next click the submitted variable will be as true.
            // So the above if condition will not be executed after the first time.
            if(!submitted)
                submitted= true;
        });
    });