Adding a loading gif when submitting form?

Question

While my code calculates, Id like the submit button to go from the "RUN" that it is now to the loading gif that I have. Now when I click the RUN button, I also need a certain script to run which calculates all sorts of data and returns it back to the page. I wrote a function that holds the other two function and calls them in sequence. I even added a 3rd function that would revert back the submit button but I can't seem to figure this out.

The website is www.fsaesim.com/simulation.html which would be much easier to see the code, however attached is the code.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="framework.js"></script>
<script type="text/javascript">
    function ShowCalculation() {
        var results = Main($("#vehicleWeightTxt").val(), $("#tireChoiceSel").val(), $("#wheelBaseTxt").val(), $("#wheelRadiusTxt").val(), $("#trackWidthTxt").val(), $("#hcgTxt").val(), $("#weightDistributionTxt").val(), $("#shiftRpmTxt").val(), $("#ntTxt").val());

        $('#outputTotalTime').empty();
        $('#outputTotalPoints').empty();
        $('#outputFuelUsed').empty();
        $('#outputTimeOpenThrottle').empty();
        $('#outputCorneringTimeTotal').empty();
        $('#outputTotalStraightSectionTime').empty();
        $('#outputTotalNumberOfShifts').empty();
        $('#outputTractionLimitedDuration').empty();
        $('#outputMeanLongAccel').empty();
        $('#outputMeanHorsepower').empty();
        $('#outputAccelerationTime').empty();
        $('#outputMeanAccelerationLongAccel').empty();
        $('#outputAccelerationTractionLimitedTime').empty();
        $('#outputAccelerationTotalPoints').empty();
        $('#outputAccelerationWideOpenThrottlePercentage').empty();
        $('#outputAccelerationShifts').empty();
        $('#outputAccelerationTrapSpeed').empty();
        $('#outputTotalEnduranceTime').empty();
        $('#outputTotalEndurancePoints').empty();
        $('#outputTotalEnduranceFuelUsed').empty();
        $('#outputTotalWOTPercentage').empty();
        $('#outputTotalEnduranceShifts').empty();
        $('#outputTotalEnduranceTractionLimitedTime').empty();
        $('#outputTotalEnduranceAcceleration').empty();
        $('#outputSkidpadTime').empty();
        $('#outputSkidpadPoints').empty();
        $('#outputSkidpadVelocity').empty();
        $('#outputSkidpadAcceleration').empty();
        $('#outputAutocrossTime').empty();
        $('#outputAutocrossPoints').empty();
        $('#outputAutocrossTotalShifts').empty();
        $('#outputAutocrossTractionLimitedTime').empty();
        $('#outputAutocrossVelocity').empty();
        $('#outputAutocrossWOTPercentage').empty();
        $('#outputAutocrossLongitudinalAcceleration').empty();
        $('#outputMaxHorsepower').empty();




        $("#outputTotalTime").append(results.output1);
        $("#outputTotalPoints").append(results.output2);
        $("#outputFuelUsed").append(results.output3);
        $("#outputTimeOpenThrottle").append(results.output4);
        $("#outputCorneringTimeTotal").append(results.output5);
        $("#outputTotalStraightSectionTime").append(results.output6);
        $("#outputTotalNumberOfShifts").append(results.output7);
        $("#outputTractionLimitedDuration").append(results.output8);
        $("#outputMeanLongAccel").append(results.output9);
        $("#outputMeanHorsepower").append(results.output10);
        $("#outputMaxHorsepower").append(results.output27);


        $("#outputAccelerationTime").append(results.output11);
        $("#outputMeanAccelerationLongAccel").append(results.output12);
        $("#outputAccelerationTractionLimitedTime").append(results.output13);
        $("#outputAccelerationTotalPoints").append(results.output14);
        $("#outputAccelerationWideOpenThrottlePercentage").append(results.output15);
        $("#outputAccelerationShifts").append(results.output16);
        $("#outputAccelerationTrapSpeed").append(results.output17);

        $("#outputTotalEnduranceTime").append(results.output1);
        $("#outputTotalEndurancePoints").append(results.output2);
        $("#outputTotalEnduranceFuelUsed").append(results.output3);
        $("#outputTotalWOTPercentage").append(results.output4);
        $("#outputTotalEnduranceShifts").append(results.output7);
        $("#outputTotalEnduranceTractionLimitedTime").append(results.output8);
        $("#outputTotalEnduranceAcceleration").append(results.output9);

        $("#outputSkidpadTime").append(results.output18);
        $("#outputSkidpadPoints").append(results.output19);
        $("#outputSkidpadVelocity").append(results.output20);
        $("#outputSkidpadAcceleration").append(results.output21);

        $("#outputAutocrossTime").append(results.output22);
        $("#outputAutocrossPoints").append(results.output23);
        $("#outputAutocrossTotalShifts").append(results.output24);
        $("#outputAutocrossTractionLimitedTime").append(results.output25);
        $("#outputAutocrossVelocity").append(results.output26);
        $("#outputAutocrossWOTPercentage").append(results.output4);
        $("#outputAutocrossLongitudinalAcceleration").append(results.output9);



    }
    function mouseClick() {
        document.getElementById("submitButton").src = "images/loading.gif";

    }
    function revertBack() {
        document.getElementById("submitButton").src = "images/simulationSubmit.png";
    }
    function simulationEvents() {
        mouseClick();
        ShowCalculation();
        revertBack();
    }


</script>

<center><a href=""><img src="images/simulationSubmit.png" alt="" id="submitButton" onmouseover="mouseOver()" onmouseout="mouseOut()" onclick="simulationEvents(); return false;" /></a></center>

Answer 1

Since all your processing is being done in javascript, that will tie up your script until it finishes.

Javascript isn't multithreaded, it does one task at a time until that task is done.

Generally, when you see that animated gif while a form is being processed the page is using AJAX or something similar. The number crunching is happening server-side using PHP or Python or something like that.

The animation just runs while the javascript waits to hear back from the server-side script.

You might be able to work around it somewhat with this tutorial but that seems like overkill for this situation. The easiest thing would probably be to send the form data to a server-side script or just deal with not having an animation during processing.

Edit: If you're wanting to learn how to do AJAX, here's a tutorial that uses jQuery, which your site is already loading.