My divs are not showing when I click on submit.

I can get them to show if I do a window.onload() but the divs have to have display: none; by default;

How can I make it so these divs show when I hit submit because my form takes about 30 seconds to process, it has a lot of fields.

HTML

<div id=overlay-back></div>

<div id=overlay>

    <div id=dvLoading>

        <p>Please wait<br>while we are loading...</p>

        <img id=loading-image src=img/ajax-loader.gif alt=Loading... />

    </div>

</div>

Submit Button

  <div class=form-buttons-wrapper>

        <button id=submit name=submit type=submit class=form-submit-button>

             Submit

        </button>

  </div>

CSS

#overlay {

position : absolute;

top      : 0;

left     : 0;

width    : 100%;

height   : 100%;

z-index  : 995;

display  : none;

} 

#overlay-back {

position   : absolute;

top        : 0;

left       : 0;

width      : 100%;

height     : 100%;

background : #000;

opacity    : 0.6;

filter     : alpha(opacity=60);

z-index    : 990;

display    : none;

}

#dvLoading {

padding: 20px;

background-color: #fff;

border-radius: 10px;

height: 150px;

width: 250px;

position: fixed;

z-index: 1000;

left: 50%;

top: 50%;

margin: -125px 0 0 -125px;

text-align: center;

display: none;

}

jQuery

<script>

$(function() {

    $('#submit').on('submit', function() {

        $('#dvLoading, #overlay, #overlay-back').prop(display, block).fadeIn(500);

    });    

});    

</script>

The reason I am displaying none by default in css because if someone has javascript disabled I do not want any inteference