将display设置为内联提交表单，但block不会

Setting display to inline submits form but block does not

本文关键字：表单 block 不会 提交 display 设置      更新时间：2023-09-26

我有一个网站，设置在移动设备上使用。用户可以在画布元素上绘制，然后单击"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>

p。通过将"submittingButton"更改为type=button，我的代码按预期工作。我不希望表单提交，saveImage()函数使用ajax post将图像提交到服务器。

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

默认情况下，表单中的按钮元素是一个提交按钮，所以如果你有一个按钮，你不想作为一个提交按钮，给它一个类型为button(或者使用一个类型为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">

所以表单在点击时没有提交的机会。同样，对于 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更新，因此不会更改标签。

相关文章：