0

我有一个设置为在移动设备上使用的网站。用户可以在画布元素上绘图,然后单击“提交按钮”按钮将画布保存到服务器。当用户单击按钮时,“submitButton”按钮消失,而“submittingButton”按钮出现在它的位置。所有这些都正常工作。事实上,在我将“submittingButton”按钮更改为 atype=button而不是type=submit.

但是,我的问题是,当我更改style.display“submittingButton”按钮的 时,如果我将 设置style.displayblock,则不会提交表单(这是我想要的),但按钮会显示在新行上。但是,如果我将 设置style.displayinlineinline-block,则提交表单,刷新页面,并清除绘图。为什么设置为时表单提交或style.display设置为时不提交?inlineinline-blockstyle.displayblock

以下是我的代码的相关部分:

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;" >&nbsp;</button>
    <button id="submitButton" type="submit" onclick="sendImage()">&nbsp;</button>
    <button id="submittingButton" style="display:none;">&nbsp;</button>
  </div>
</form>

PS。通过将“submittingButton”更改为type=button. 我不希望表单提交,该saveImage()函数使用 ajax post 将图像提交到服务器。

4

1 回答 1

0

我不知道为什么更改按钮的显示值会导致它提交表单,但是我可以提供以下内容。

默认情况下,表单中的按钮元素是提交按钮,因此如果您有一个按钮,但您不充当提交按钮,请给它一个按钮类型(或使用带有按钮类型的输入元素), 所以:

<button id="clearButton" onclick="redoSig(); return false;" >&nbsp;</button>

会更好:

<button id="clearButton" type="button" onclick="redoSig();">Clear</button>

或者

<input id="clearButton" type="button" onclick="redoSig();" value="Clear">

所以点击表单时没有机会提交表单。同样对于submitButton按钮,将其更改为按钮则无法提交表单。

最后,您似乎正在做的只是更改按钮的标签。您可能可以使用以下方法来做到这一点:

<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 更新,因此不会更改标签。

于 2013-05-29T23:30:50.180 回答