单击提交按钮以处理表单后弹出图像

Question

I'm trying to make a popup image when an user clicks on the submit button. The form takes some time to process that's why. The image does pop up fine. But the form won't send. When I delete the jQuery for the popup image it sends the form as it should.

I started with some html:

<div id="showProcessingImg">
    <input type="submit" name="submit" id="submitForm" value="Send">                                                    
</div>

<div id="page-cover">
    <div id="uncloseable-lightbox">             
    </div>
</div>

And of course some jQuery:

//POPUP IMAGE   
$('#showProcessingImg').click(function() {
    $('#submitForm').attr('disabled', true);
    $('#saveSignature').attr('disabled', true);
    $('#clearSignature').attr('disabled', true);
    $('#disablePrev').hide();
    $('#page-cover').show();
});

//CHECK IF SIGNATURE IS SAVED                   
$('#submitForm').click(function() {
    if($("#signature").val().length === 0){
        alert("Vul eerst een handtekening in en druk op save.");
      return false;
    } else {
        return true;
    }
}); 

And last but not least the CSS:

#page-cover {
    background-color: #888; 
    display: none; 
    position: absolute; 
    left:0;
    right:0;
    top:0;
    bottom:0;
    width: 100%; 
    height: 100%;
    opacity: 0.8;
    filter: alpha(opacity=80);
}

#uncloseable-lightbox {
    background: url(../images/processing.gif) no-repeat !important;
    background-size: 320px 70px !important;
    position:absolute;
    left:50%;
    top:40%;
    margin-left:-160px;
    margin-right:-160px;
    width:30%;
    height:15%;
}

Thanks in advance.

Answer 1

The events should be on the submit button not on the div wrapping it.Like this

<div id="showProcessingImg">
    <input type="text" name="text" id="signature"> 
    <input type="submit" name="submit" id="submitForm" value="Send">                                                    
</div>

<div id="page-cover">
    <div id="uncloseable-lightbox">             
    </div>
</div>

Js:

$('#submitForm').click(function() {
     $('#submitForm').attr('disabled', true);
    $('#saveSignature').attr('disabled', true);
    $('#clearSignature').attr('disabled', true);
    $('#disablePrev').hide();
    $('#page-cover').show();
    if($("#signature").val().length === 0){
        alert("Vul eerst een handtekening in en druk op save.");
      return false;
    } else {
        return true;
    }
}); 

Css:

#page-cover {
    background-color: #888; 
    display: none; 
    position: absolute; 
    left:0;
    right:0;
    top:0;
    bottom:0;
    width: 100%; 
    height: 100%;
    opacity: 0.8;
    filter: alpha(opacity=80);
}

#uncloseable-lightbox {
    background: url(../images/processing.gif) no-repeat !important;
    background-size: 320px 70px !important;
    position:absolute;
    left:50%;
    top:40%;
    margin-left:-160px;
    margin-right:-160px;
    width:30%;
    height:15%;
}

Code Here: http://jsfiddle.net/harshdand/k54b2Lv5/1/