Javascript 单击“提交”按钮处理表单后的图像popop

我试图在用户点击提交按钮时弹出一个图像。表单需要一些时间来处理，这就是为什么。图像确实弹出得很好。但是表单不会发送。当我删除弹出图像的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>

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

---

提前感谢。

事件应该在提交按钮上，而不是在包装它的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>

Css:

---

此处代码：

不要将表单和\或字段设置为禁用，将它们设置为只读。禁用的字段将不会被发布。@Athafoud感谢它可以工作。但它是否会阻止用户点击按钮两次？因此，将表单发送两次我认为是这样！但是，如果您想添加一个额外的层，您可以执行$'submitForm'。在click函数中关闭'click'，并在“离开”函数之前重新绑定事件。

<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>

$('#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;
    }
}); 

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