單擊提交按鈕以處理表單后彈出圖像

Question

當用戶單擊“提交”按鈕時，我試圖制作一個彈出圖像。 表單需要一些時間來處理，這就是為什么。 圖像確實彈出正常。 但是表格不會發送。 當我刪除彈出圖像的jQuery時，它將按原樣發送表單。

我從一些html開始：

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

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

當然還有一些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;
    }
}); 

最后但並非最不重要的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%;
}

提前致謝。

Answer 1

事件應該在提交按鈕上而不是在包裝它的div上。

<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%;
}

此處的代碼： http : //jsfiddle.net/harshdand/k54b2Lv5/1/