Question

我有一个设置用于移动设备的网站。用户可以在canvas元素上绘制，然后单击“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;" >&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帖子将图像提交给服务器。

Answer 1

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

默认情况下，表单中的button element是一个提交按钮，因此，如果您有一个按钮而不是用作提交按钮的内容，请为其指定button类型（或者使用类型为按钮的输入元素），所以：

<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">

因此，单击表单时无法提交表单。类似地，对于 submittingButton 按钮，将其更改为按钮，然后它无法提交表单。

最后，您似乎正在做的就是更改按钮的标签。您可以使用以下内容执行此操作：

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

将显示设置为内联提交表单，但块不提供

1 个答案: