Show a loading image after clicking the submit button when the form is valid

Question

I have a very basic form that I want to show a loading image after clicking the submit button if the form is valid and then show the action page. Here is the code for javascript of validating:

<script type="text/javascript">
function validateForm()
{
    valid = true;

    if(document.grades.fullName.value == "")
    {
        alert ("Please fill out your Full Name.");
        valid = false;
    }

    if(document.grades.idNo.value == "")
    {
        alert ("Please fill out your ID Number.");
        valid = false;
    }

    if(document.grades.pCS.value == "")
    {
        alert ("Please fill out your grade for Prelim Class Standing.");
        valid = false;
    }

    if(document.grades.pExam.value == "")
    {
        alert ("Please fill out your grade for Prelim Examination.");
        valid = false;
    }

    if(document.grades.mCS.value == "")
    {
        alert ("Please fill out your grade for Midterm Class Standing.");
        valid = false;
    }

    if ( document.grades.mExam.value == "" )
    {
        alert ("Please fill out your grade for Midterm Examination.");
        valid = false;
    }

    if(document.grades.fCS.value == "")
    {
        alert ("Please fill out your grade for Finals Class Standing.");
        valid = false;
    }

    if(document.grades.fExam.value == "")
    {
        alert ("Please fill out your grade for Finals Examination.");
        valid = false;
    }

    return valid;
}
</script>

Please someone tell me how completely.

Answer 1

Please replace,

return valid;

by,

if(valid)
{
  document.getElementById('display').style.display="block";
  return true;
}

And in html,

<div id="display" style="display:none;"><img src="{image_url}" /></div>