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

Image popop after clicking submit button for processing form

本文关键字：提交 按钮 处理 表单 图像      更新时间：2023-09-26

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

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

相关文章：