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/

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

1 个答案: