javascript - 单击处理表单的提交按钮后弹出图像

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/