0

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

但是，我的问题是，当我更改style.display“submittingButton”按钮的 时，如果我将 设置style.display为block，则不会提交表单（这是我想要的），但按钮会显示在新行上。但是，如果我将 设置style.display为inline或inline-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 回答