我有一个网站,设置在移动设备上使用。用户可以在画布元素上绘制,然后单击"submitButton"按钮将画布保存到服务器。当用户单击按钮时,"submitButton"按钮就消失了,取而代之的是一个"submittingButton"按钮。所有这些都在正常工作。事实上,在我将"submittingButton"按钮更改为type=button
而不是type=submit
后,整个项目正常工作。
我的问题是,然而,当我改变"submittingButton"按钮的style.display
时,如果我将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>
p。通过将"submittingButton"更改为type=button
,我的代码按预期工作。我不希望表单提交,saveImage()
函数使用ajax post将图像提交到服务器。
我不知道为什么改变按钮的显示值会导致它提交表单,但是我可以提供以下内容:
默认情况下,表单中的按钮元素是一个提交按钮,所以如果你有一个按钮,你不想作为一个提交按钮,给它一个类型为button(或者使用一个类型为button的输入元素),所以:
<button id="clearButton" onclick="redoSig(); return false;" > </button>
最好是:
<button id="clearButton" type="button" onclick="redoSig();">Clear</button>
或
<input id="clearButton" type="button" onclick="redoSig();" value="Clear">
所以表单在点击时没有提交的机会。同样,对于 subtingbutton 按钮,将其更改为按钮,然后它不能提交表单。
最后,你所做的似乎只是改变按钮的标签。你可以这样做:
<form onsubmit="return modifiedSubmit(this);" ...>
...
<input name="submitButton" type="submit" value="Submit signature">
</form>
和功能:
function modifiedSubmit(form) {
if (form.submitButton) {
form.submitButton.value = "Submitting...";
form.submitButton.disabled = true;
window.setTimeout(function(){form.submit();}, 10);
return false;
}
}
当然没有经过测试,但希望你能明白。超时是为了确保在表单提交之前按钮标签发生更改,否则浏览器可能会认为,由于它们正在导航到另一个页面,因此它们不会进行任何DOM更新,因此不会更改标签。