我有一个设置为在移动设备上使用的网站。用户可以在画布元素上绘图,然后单击“提交按钮”按钮将画布保存到服务器。当用户单击按钮时,“submitButton”按钮消失,而“submittingButton”按钮出现在它的位置。所有这些都正常工作。事实上,在我将“submittingButton”按钮更改为 atype=button
而不是type=submit
.
但是,我的问题是,当我更改style.display
“submittingButton”按钮的 时,如果我将 设置style.display
为block
,则不会提交表单(这是我想要的),但按钮会显示在新行上。但是,如果我将 设置style.display
为inline
或inline-block
,则提交表单,刷新页面,并清除绘图。为什么设置为时表单提交或style.display
设置为时不提交?inline
inline-block
style.display
block
以下是我的代码的相关部分:
function sendImage(){
if(window.hasBeenDrawn){
document.getElementById("signError").style.display="none";
document.getElementById("submitButton").disabled=true;
document.getElementById("clearButton").disabled=true;
window.wasSent=true;
document.getElementById("submitButton").style.display="none";
document.getElementById("submittingButton").style.display="";
//document.getElementById("submittingButton").style.display="block";
saveImage();
}
和 HTML:
<form method="post" action="" class="sigPad">
<div id="receipt" style="text-align:center">
<div class="sig sigWrapper">
<canvas style="width:85%; height:95%; margin-top:25px" height="300" class="pad" id="myCanvas" />
<input type="hidden" name="output" class="output" />
</div>
<br />
</div>
<div id="clearSubButtons">
<button id="clearButton" onclick="redoSig(); return false;" > </button>
<button id="submitButton" type="submit" onclick="sendImage()"> </button>
<button id="submittingButton" style="display:none;"> </button>
</div>
</form>
PS。通过将“submittingButton”更改为type=button
. 我不希望表单提交,该saveImage()
函数使用 ajax post 将图像提交到服务器。